首页 > 解决方案 > Easy UI Datagrid过滤器组合框问题

问题描述

我正在使用 Easy UI 数据网格在网格内显示数据。在网格内有一个状态组合框过滤器。组合框过滤器有时会加载,有时会给出问题无法读取未定义的属性选项。任何人都面临同样的问题。用于测试的 HTML

var qmodel={};
    var gData=[{Id:"1",Name:"Amit", Status:"New"},{Id:"2",Name:"Sumit",Status:"Processed"},{Id:"3",Name:"David",Staus:"Failed"}];

    var statuses=[{id:"1",name:"New"},{id:"2",name:"Pass"},{id:"3",name:"Processed"},{id:"4",name:"Failed"}];
    var cols=[{field:"Id",title:"Id",width:100},{field:"Name",title:"Name",width:100},{field:"Status",title:"Status",width:100}];
    
     $("#dGrid").datagrid({
            columns: [cols],
            data:gData,
            clientPaging: false,
            queryParams: qmodel,        
            pagination: true,
            fitColumns: true,
            remoteFilter: true,
            onBeforeLoad: function (param) {
                qmodel.sort = param.sort;
                qmodel.order = param.order;
                qmodel.page = param.page;
                qmodel.rows = param.rows;
                qmodel.filterRules = param.filterRules;               
                var firstLoad = false;
                param.first = firstLoad;                
            },

        }).datagrid('enableFilter', [{
            field: 'id',
            type: 'text'
        }, {
            field: 'name',
            type: 'text'
        },
            {
                field: "status", type: "combobox", options: {
                    valueField: "id", textField: "name", data:statuses, editable: false,
                    onLoadSuccess: function (items) {
                        if (items.length) {
                            var opts = $(this).combobox('options');
                            $(this).combobox('select', items[0][opts.valueField]);
                        }
                    },
                    
                    onChange: function (newValue, oldValue) {
                        $("#dGrid").datagrid('addFilterRule', {
                            field: 'status',
                            op: 'equalsTo',
                            value: newValue
                        });
                        $("#dGrid").datagrid('doFilter');
                    }
                }
            },
      
        ]);
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
     <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
     <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
     <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
     <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
     <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
     <table id="dGrid" class="easyui-datagrid">
        </table>

标签: jquery-easyui

解决方案


推荐阅读