在EasyUI的DataGrid中嵌入Combobox

淩亂°似流年 2022-08-01 15:45 142阅读 0赞

在做项目时，需要在EasyUI的DataGrid中嵌入Combobox，花了好几天功夫，在大家的帮助下，终于看到了它的庐山真面：

![Center][]

核心代码如下：

<html>
    <head>
        @*添加Jquery EasyUI的样式*@
        <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" />
        <link href="@Url.Content("../../Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" />
    
        @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
        <script src="@Url.Content("../../Content/JqueryEasyUI/jquery-1.8.0.min.js")"></script>
        <script src="@Url.Content("../../Content/JqueryEasyUI/jquery.easyui.min.js")"></script>
        <script src="@Url.Content("../../Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js")"></script>
    
        @*实现对EasyUI的DataGird控件操作的JS代码*@
        <script type="text/javascript">
    	
            $(function () {
                //当页面首次刷新的时候执行的事件
                initTable();    
            });
    
            //实现新闻DataGird控件的绑定操作
            function initTable(queryData) {
                $('#test').datagrid({            //定位到Table标签，Table标签的ID是test
                    fitColumns: true,
                    url: '/News/QueryAllNews',   //指向后台的Action来获取当前用户的信息的Json格式的数据
                    title: '新闻公告',           //表格标题
                    striped: true,               //斑马线效果
                    pagination: true,            //分页工具栏
                    rownumbers: true,            //显示行号
                    onClickCell: onClickCell,    //点击单元格触发的事件（重要）
                    onAfterEdit:onAfterEdit,     //编辑单元格之后触发的事件（重要）
                    idField: 'NewsID',           //标识字段
                    queryParams: queryData,      //异步查询的参数
                    columns: [[
    	                  { field: 'ck', checkbox: true },
    	                  { title: '主键', field: 'NewsID', sortable: true, hidden: true, },
                        <span style="white-space:pre">	</span>  { title: '内容标题', field: 'NewsTitle', width: 50, sortable: true },
                      <span style="white-space:pre">	</span>  { title: '具体内容', field: 'NewsContent', sortable: true, hidden: true, },
                      <span style="white-space:pre">	</span>  { title: '创建时间', field: 'TimeStamp', sortable: true, },
                      <span style="white-space:pre">	</span>  { title: '所属类别', field: 'CategoryName', sortable: true, },
                      <span style="white-space:pre">	</span>  { title: '创建人', field: 'UserName', sortable: true },
                       <span style="white-space:pre">	</span>  {
                                title: '是否在首页显示', field: 'IsShow', sortable: true,                      
                                editor: {
                                          type: 'combobox',
                                          options: {                             
                                                     valueField: 'text',
                                                     textField: 'text',
                                                     method: 'get',
                                                     url: '/News/ReturnIsShowData',
                                                     required: true
                                                    }
                                         }
                              }                 
                            ]],
                    toolbar: [{
                        id: 'btnadd',
                        text: '添加',
                        iconCls: 'icon-add',
                        handler: function () {
                            //实现弹出注册信息的页面
                            AddNews();
                        }
                    }, '-', {
                        id: 'btncut',
                        text: '修改',
                        iconCls: 'icon-cut',
                        handler: function () {
                            //实现修改的方法
                            UpdateLzjs();
                        }
                    }, '-', {
                        id: 'btnCancle',
                        text: '删除',
                        iconCls: 'icon-remove',
                        handler: function () {
                            //实现直接删除所有数据的方法
                            DeleteLzjs();
                        }
                    }]
                });
            }
    
    		
            $.extend($.fn.datagrid.methods, {
                editCell: function (jq, param) {
                    return jq.each(function () {
                        var opts = $(this).datagrid('options');
                        var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                        for (var i = 0; i < fields.length; i++) {
                            var col = $(this).datagrid('getColumnOption', fields[i]);
                            col.editor1 = col.editor;
                            if (fields[i] != param.field) {
                                col.editor = null;
                            }
                        }
                        $(this).datagrid('beginEdit', param.index);
                        for (var i = 0; i < fields.length; i++) {
                            var col = $(this).datagrid('getColumnOption', fields[i]);
                            col.editor = col.editor1;
                        }
                    });
                }
            });
    
            var editIndex = undefined;
    	//判断是否编辑结束
            function endEditing() {
                if (editIndex == undefined) { return true }
                if ($('#test').datagrid('validateRow', editIndex)) {
                    $('#test').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }
    		
    	//点击单元格触发的事件
            function onClickCell(index, field) {
                if (endEditing()) {
                    $('#test').datagrid('selectRow', index)
    						.datagrid('editCell', { index: index, field: field });
                    editIndex = index;
                }
            }
    		
    	//编辑完单元格之后触发的事件
            function onAfterEdit(index, row, changes) {
                
                //…执行编辑单元格后需要执行的操作…
    	    //…执行编辑单元格后需要执行的操作…
            }     
            }
        </script>
    </head>
    <body>
            <table id="test" style="width: 955px; margin: 20px 0 10px 8px" title="新闻中心" iconcls="icon-edit">
            </table>
    </body>
    </html>

在Combobox类型的editor的数据源url: '/News/ReturnIsEnabledData'在相应Controller中对应的方法为（其实就是在后台拼了个特别简单的json串）：

public string ReturnIsShowData()
            {
                string strJson = "[{\"id\":\"yes\",\"text\":\"是\"},{\"id\":\"no\",\"text\":\"否\"}]";          
                return strJson;
            }

当选择了Combobox中的值时，只需要把将要执行的操作写在onAfterEdit(index, row, changes)函数中即可，index为编辑的行号，默认从0开始；row为被编辑单元格所在的整个行，row.列名可以获得此行此列的数据，如row.IsShow可以获得被编辑单元格所在行的IsShow列的数据。

（此文内容基于Asp.net MVC）

[Center]: /images/20220731/c85b25580013470f9dac4785d9a1f5a2.png