擴展 easyui 控件系列：為datagrid 增加過濾行

本文轉載自查看原文 2013-08-29 15:38 15403 easyui/ 過濾行/ datagrid

此功能還為真正完成，起到拋磚引玉的效果，發動大家的力量把這個功能完善起來，效果圖如下：

基本上就是擴展了 datagrid.view 中的onAfterRender 這個事件，具體代碼如下：

$.extend($.fn.datagrid.defaults.view,{
            onAfterRender:function(target){
                var dc = $.data(target,'datagrid').dc;
                if(dc.header2.find('[filter="true"]').length == 0){
                    var header = dc.header1; //固定列表頭
                    var header2 = dc.header2; // 常規列表頭
                    var filterRow = $('<tr></tr>');
                    var opts = $.data(target,'datagrid').options;
                    var columns = opts.columns;
                    var frozenColumns = opts.frozenColumns;

                    $.each(frozenColumns[0],function(){
                        if(!this.checkbox){
                            var w = header.find('[field="'+this.field+'"] > div').width();

                            filterRow.append('<td><input style="width:'+w+'px"/></td>');
                        }
                        else{
                            header.find('.datagrid-header-check').parent().attr('rowspan',2)
                        }
                    });
                    header.find('tbody').append(filterRow);
                    filterRow = $('<tr filter="true"></tr>');

                    $.each(columns[0],function(){
                        var w = header2.find('[field="'+this.field+'"] > div').width();
                        if(this.hfilter){
                            var a = $('<input field="'+this.field+'" class="easyui-combobox" style="width:'+w+'px" />');
                            filterRow.append($('<td></td>').append(a));
                            a.data('options',this.hfilter);
                        }else{
                            filterRow.append('<td><input style="width:'+w+'px"/></td>');
                        }

                    });

                    header2.find('tbody').append(filterRow);

                    var dgData = $(target).datagrid('getData').rows;

                    header2.find('input[field]').each(function(){
                        var opts = $(this).data('options');
                        var field = $(this).attr('field');
                        $.extend(opts.options,{
                            onSelect:function(item){
                                var d = _.filter(dgData,function(row){
                                    return row[field].indexOf(item[opts.options.textField]) > -1;
                                });

                                $(target).datagrid('loadData',d);
                            }
                        });

                        $(this)[opts.type](opts.options);
                    })
                }
            }
        });

在定義列時，我們加上個自定義的屬性

{ title: '部門名稱', field: 'depname', width: 120,hfilter:{type:'combobox',options:{data:roleData,valueField:'KeyId',textField:'RoleName'}} }

紅色字體就是自定義的屬性，用來定義過濾行中的控件的

在使用的時候，擴展的代碼要放到Datagrid 初始化的前邊！

示例DEMO 完整代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.3.3/themes/2013/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.3.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.3.3/themes/default/lookup.css">

    <script type="text/javascript" src="../../jquery-easyui-1.3.3/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.3.3/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>

    <script src="../../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../jquery-easyui-1.3.3/underscore-min.js"></script>

</head>
<body>


    <table id=userlist></table>


    <script>
       
        var userData ={"total":6,"rows":[{"KeyId":1,"UserName":"admin2","Password":"93BCC5699183BED3AD5E3C050ADEF183","PassSalt":"K6FqbXXK","Email":"hxl_apple@163.com","IsAdmin":false,"IsDisabled":false,"TrueName":"瘋狂秀才","DepartmentId":4,"Mobile":"","QQ":"","Remark":"","AddTime":null,"MenusJson":null,"ConfigJson":"{\"theme\":{\"title\":\"默認皮膚\",\"name\":\"default\"},\"showType\":\"menubutton\",\"gridRows\":\"40\"}","depname":"生產部","Departments":"4,15"},{"KeyId":9,"UserName":"admin","Password":"7D34608F3723F586DC28FC5D88BCECC6","PassSalt":"ZWvu4jSn","Email":"hxl_apple@163.com","IsAdmin":true,"IsDisabled":false,"TrueName":"瘋狂秀才","DepartmentId":3,"Mobile":"18668088525","QQ":"1055818239","Remark":"系統默認帳號，不可刪除","AddTime":null,"MenusJson":null,"ConfigJson":"{\"theme\":{\"title\":\"流行灰\",\"name\":\"gray\"},\"showType\":\"Accordion2\",\"gridRows\":\"20\",\"showValidateCode\":false}","depname":"綜合辦公室","Departments":"3,15"},{"KeyId":10,"UserName":"test","Password":"5C7E95836A99FB74723F54C43511154A","PassSalt":"RGVJejaR","Email":"","IsAdmin":false,"IsDisabled":false,"TrueName":"Test1","DepartmentId":1,"Mobile":"","QQ":"","Remark":"","AddTime":null,"MenusJson":null,"ConfigJson":null,"depname":"幸福集團","Departments":"3,4,15,5"},{"KeyId":12,"UserName":"ddd","Password":"7A3C56FA5A59953C058E7525FA0F754F","PassSalt":"O8RnCnaH","Email":"","IsAdmin":false,"IsDisabled":false,"TrueName":"ddd","DepartmentId":0,"Mobile":"","QQ":"","Remark":"","AddTime":null,"MenusJson":null,"ConfigJson":null,"depname":"","Departments":""},{"KeyId":13,"UserName":"eee","Password":"2FE5DFAE3F8AC41F907FCF8B1C1579D7","PassSalt":"vKbkyBib","Email":"","IsAdmin":false,"IsDisabled":false,"TrueName":"eeee","DepartmentId":3,"Mobile":"","QQ":"","Remark":"","AddTime":null,"MenusJson":null,"ConfigJson":null,"depname":"綜合辦公室","Departments":""},{"KeyId":15,"UserName":"007","Password":"9E704A8699D72ADA11A7EB7BF07739FA","PassSalt":"bcLJiqHB","Email":"","IsAdmin":false,"IsDisabled":false,"TrueName":"007","DepartmentId":1,"Mobile":"","QQ":"","Remark":"","AddTime":null,"MenusJson":null,"ConfigJson":null,"depname":"幸福集團","Departments":""}]}
        var roleData = [{"KeyId":2,"RoleName":"生產部","Sortnum":2,"Remark":"工程師","IsDefault":0,"Navigations":null,"Users":null,"Departments":""},
            {"KeyId":3,"RoleName":"幸福集團","Sortnum":1,"Remark":"6666","IsDefault":0,"Navigations":null,"Users":null,
                "Departments":"1,3,4,15,5,9,10,11,12,13,14,8"},
            {"KeyId":17,"RoleName":"綜合辦公室","Sortnum":1,"Remark":"","IsDefault":1,"Navigations":null,"Users":null,"Departments":"1,4,15"},{"KeyId":20,"RoleName":"普通用戶","Sortnum":3,"Remark":"","IsDefault":0,"Navigations":null,"Users":null,"Departments":"1,3,4,15,5,9,10,11,12,13,14,8"}]


        $.extend($.fn.datagrid.defaults.view,{
            onAfterRender:function(target){
                var dc = $.data(target,'datagrid').dc;
                if(dc.header2.find('[filter="true"]').length == 0){
                    var header = dc.header1; //固定列表頭
                    var header2 = dc.header2; // 常規列表頭
                    var filterRow = $('<tr></tr>');
                    var opts = $.data(target,'datagrid').options;
                    var columns = opts.columns;
                    var frozenColumns = opts.frozenColumns;

                    $.each(frozenColumns[0],function(){
                        if(!this.checkbox){
                            var w = header.find('[field="'+this.field+'"] > div').width();

                            filterRow.append('<td><input style="width:'+w+'px"/></td>');
                        }
                        else{
                            header.find('.datagrid-header-check').parent().attr('rowspan',2)
                        }
                    });
                    header.find('tbody').append(filterRow);
                    filterRow = $('<tr filter="true"></tr>');

                    $.each(columns[0],function(){
                        var w = header2.find('[field="'+this.field+'"] > div').width();
                        if(this.hfilter){
                            var a = $('<input field="'+this.field+'" class="easyui-combobox" style="width:'+w+'px" />');
                            filterRow.append($('<td></td>').append(a));
                            a.data('options',this.hfilter);
                        }else{
                            filterRow.append('<td><input style="width:'+w+'px"/></td>');
                        }

                    });

                    header2.find('tbody').append(filterRow);

                    var dgData = $(target).datagrid('getData').rows;

                    header2.find('input[field]').each(function(){
                        var opts = $(this).data('options');
                        var field = $(this).attr('field');
                        $.extend(opts.options,{
                            onSelect:function(item){
                                var d = _.filter(dgData,function(row){
                                    return row[field].indexOf(item[opts.options.textField]) > -1;
                                });

                                $(target).datagrid('loadData',d);
                            }
                        });

                        $(this)[opts.type](opts.options);
                    })
                }
            }
        });



        $(function(){
            $('#userlist').datagrid({
                toolbar:'#toolbar',
                data:userData,
                fit:true,
                title:'用戶列表',
                selectOnCheck:false,
                checkOnSelect:true,
                singleSelect:true,
                //tools:[{iconCls:'icon-add'}],
                frozenColumns:[[
                    {checkbox:true},
                    { title: 'ID', field: 'KeyId', width: 40, sortable: true },
                    { title: '用戶名', field: 'UserName', width: 100, sortable: true }
                ]],

                columns:[[
                    { title: '真實姓名', field: 'TrueName', width: 100, sortable: true },
                    { title: '部門名稱', field: 'depname', width: 120,hfilter:{type:'combobox',options:{data:roleData,valueField:'KeyId',textField:'RoleName'}} },
                    { title: '郵箱', field: 'Email', width: 100, sortable: true },
                    {
                        title: '超管',
                        field: 'IsAdmin',
                        width: 60,
                        align: 'center',
                        formatter: function (v, d, i) {
                            if (d.UserName == "admin")
                                return '';
                            return v ? '√':'x'
                        }
                    },
                    {
                        title: '狀態',
                        field: 'IsDisabled',
                        width: 60,
                        align: 'center',
                        formatter: function (v, d, i) {
                            if (d.UserName == "admin")
                                return '';
                            return v ? '√':'x'
                        }
                    },{title:'描述',field:'Remark',width:160}
                ]],
                pagination: true,
                pageSize:20,
                rowStyler: function (index, row, css) {
                    if (row.UserName=="admin") {
                        return 'font-weight:bold;';
                    }
                }

            });
        });



    </script>


</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Easyui的datagrid的editor(行編輯器)如何擴展datetimebox類型關於EasyUI DataGrid行編輯時嵌入時間控件給 Easyui Datagrid 擴展方法 [轉]擴展jQuery easyui datagrid增加動態改變列編輯的類型 easyui datagrid 單擊行不選擇行 Easyui的DataGrid 清除所有勾選的行。 easyui datagrid deleteRow(刪除行)的BUG EasyUI-datagrid獲取編輯行的數據 easyui的datagrid的列checkbox自定義增加disabled選項 EasyUI DataGrid formatter 格式化增加鏈接