在EasyUI的DataGrid中嵌入Combobox

DannyHoo

发布于 2018-09-13 11:48:55

3.8K0

发布于 2018-09-13 11:48:55

文章被收录于专栏：Danny的专栏

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

核心代码如下：

<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）

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015年06月30日，如有侵权请联系 cloudcommunity@tencent.com 删除

其他