easyui的datagrid的js加载

系统管理员 2022-09-26 03:27 142阅读 0赞

//实现对DataGird控件的绑定操作
            function InitGrid(queryData) {
                $('#grid').datagrid({   //定位到Table标签，Table标签的ID是grid
                    url: '/Menu/FindWithPager',   //指向后台的Action来获取当前菜单的信息的Json格式的数据
                    title: '功能菜单',
                    iconCls: 'icon-view',
                    height: 650,
                    width: function () { return document.body.clientWidth * 0.9 },
                    nowrap: true,
                    autoRowHeight: false,
                    striped: true,
                    collapsible: true,
                    pagination: true,
                    pageSize: 100,
                    pageList: [50,100,200],
                    rownumbers: true,
                    //sortName: 'ID',    //根据某个字段给easyUI排序
                    sortOrder: 'asc',
                    remoteSort: false,
                    idField: 'ID',
                    queryParams: queryData,  //异步查询的参数
                    columns: [[
                        { field: 'ck', checkbox: true },   //选择
                         { title: '显示名称', field: 'Name', width: 200},
                         { title: '图标', field: 'Icon', width: 150 },
                         { title: '排序', field: 'Seq', width: 80 },
                         { title: '功能ID', field: 'FunctionId', width: 80 },
                         { title: '菜单可见', field: 'Visible', width: 80 },
                         { title: 'Winform窗体类型', field: 'WinformType', width: 400 },
                         { title: 'Web界面Url地址', field: 'Url', width: 200 },
                         { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },
                         { title: '系统编号', field: 'SystemType_ID', width: 80 }
                    ]],
                    toolbar: [{
                        id: 'btnAdd',
                        text: '添加',
                        iconCls: 'icon-add',
                        handler: function () {
                            ShowAddDialog();//实现添加记录的页面
                        }
                    }, '-', {
                        id: 'btnEdit',
                        text: '修改',
                        iconCls: 'icon-edit',
                        handler: function () {
                            ShowEditOrViewDialog();//实现修改记录的方法
                        }
                    }, '-', {
                        id: 'btnDelete',
                        text: '删除',
                        iconCls: 'icon-remove',
                        handler: function () {
                            Delete();//实现直接删除数据的方法
                        }
                    }, '-', {
                        id: 'btnView',
                        text: '查看',
                        iconCls: 'icon-table',
                        handler: function () {
                            ShowEditOrViewDialog("view");//实现查看记录详细信息的方法
                        }
                    }, '-', {
                        id: 'btnReload',
                        text: '刷新',
                        iconCls: 'icon-reload',
                        handler: function () {
                            //实现刷新栏目中的数据
                            $("#grid").datagrid("reload");
                        }
                    }],
                    onDblClickRow: function (rowIndex, rowData) {
                        $('#grid').datagrid('uncheckAll');
                        $('#grid').datagrid('checkRow', rowIndex);
                        ShowEditOrViewDialog();
                    }
                })
            };

单选和行选择问题：

//允许多选
    singleSelect: false,
    //设置复选框和行的选择状态不同步
    checkOnSelect: false, 
    selectOnCheck: false,
    //设置选中事件，清除之前的行选择
    onSelect: function (rowData) {
                    navgrid.datagrid("unselectAll");
     }