在做项目时，须要在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）

在EasyUI的DataGrid中嵌入Combobox的更多相关文章

  1. EasyUI 的DataGrid中DateTime的格式化问题

    想必用过EasyUI的朋友们都应该会遇到这样的情况吧:(下图) 在EasyUI中DataGrid中如果要显示DateTime的时间时候,便会显示上图这样的格式,很明显,这里的格式不会是我们想要的,我们 ...

  2. easyui datagrid 中添加combobox

    项目需要,如下图所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. EasyUI——DataGrid中嵌入Radio

    前一篇博客写到项目中的广告位管理,当时没有写到今天的问题,这个问题当时也是困扰我好久. 经过自己的努力和同志们的帮助,最后最终解决. 实现要求把全部的广告位后面的单选button设成一组,目的是一个广 ...

  4. hibernate左连接查询时在easyUI的dataGrid中有些行取值为空的解决办法

    1 当使用left join左连连接,sql语句为 select t from SecondPage t left join t.rightNavbar n where 1=1 页面中出现了部分空行的 ...

  5. EasyUI 解决 datagrid 中 NumberBox 限制小数位数后不能输入小数点问题

    初始化界面,发现编辑datagrid,不能输入小数点. var arrColumnsCNT = [[ { title: '毛重', field: 'GrossWeight', halign: 'cen ...

  6. EasyUI获取DataGrid中某一列的所有值

    function count() { var rows = $('#dg'').datagrid('getRows')//获取当前页的数据行 var total = 0; for (var i = 0 ...

  7. easyui获取datagrid中的某一列的所有值

    function getCol(){ var rows = $("#dg").datagrid("getRows"); var total = "&q ...

  8. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  9. easyui datagrid中关联combox

    datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: ' ...

随机推荐

  1. sleep 和wait的差别

    基本的差别 1.sleep 是Thread 类的方法,wait 是Object类中定义的方法 2.sleep()方法可以在任何地方使用 3.wait()方法只能在synchronized方法中使用,或 ...

  2. Spring框架针对dao层的jdbcTemplate操作之jdbc数据库连接原始操作方法 所需安装包下载

    crud指数据库或者持久层的基本操作,包括 增加(Create).读取查询(Retrieve 取回).更新(Update)和删除(Delete) Spring不仅对JDBC进行了封装,也对Hibern ...

  3. UVA12633 Super Rooks on Chessboard

    题目描述 题解: 第一眼满眼骚操作,然后全部否掉. 然后屈服于题解,才发现这题这么执掌. 首先,如果这个东西是普通的车,那我们可以记录一下$x,y$的覆盖情况,然后减一下; 但是这个可以斜着走. 所以 ...

  4. sql数据表的设计思路

    好的表结构分的比较细致,个人理解大概主要分为主表.明细.历史记录表.中间表,辅助表结构应该分为:类型表.状态表.统计表.统计明细表等.为了一个功能加那么多表实在是多余,如果写一个非常复杂的业务逻辑还是 ...

  5. linux（php环境） 安装ffmpeg

    实现上传视频获取视频的第一帧当做视频封面 1.安装ffmpeg ffmpeg的下载链接  https://ffmpeg.org/download.html 解压安装包 tar -jxvf ffmpeg ...

  6. CSS3---box-shadow设置

    1.box-shadow是向盒子添加阴影.支持添加一个或者多个. 2.box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 3.注意:ins ...

  7. NowCoder小杰的签到题(模拟，思维)

    链接: https://www.nowcoder.com/acm/contest/52/M 题意: 给定n个队伍的到场时间, 有3个报道位, 每个队伍报道需要b时间, 求所有报道完成的时间. 分析: ...

  8. MySQL 慢查询优化

    为什么查询速度会慢 1.慢是指一个查询的响应时间长.一个查询的过程: 客户端发送一条查询给服务器 服务器端先检查查询缓存,如果命中了缓存,则立可返回存储在缓存中的结果.否则进入下一个阶段 服务器端进行 ...

  9. POJ-1067取石子游戏，威佐夫博弈范例题/NYOJ-161,主要在于这个黄金公式~~

    取石子游戏 Time Limit: 1000MS   Memory Limit: 10000K              Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取 ...

  10. 【区间筛】2017多校训练四 HDU6069 Counting Divisors

    http://acm.hdu.edu.cn/showproblem.php?pid=6069 [题意] 给定l,r,k,求 d(n)是n的因子个数 [思路] [Accepted] #include&l ...