专栏首页Danny的专栏在EasyUI的DataGrid中嵌入Combobox

在EasyUI的DataGrid中嵌入Combobox

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/46687767

       在做项目时,需要在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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础——CSS盒子模型

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • 在JSP页面中调用另一个JSP页面中的变量

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • 【EJB学习笔记】——远程调用和本地调用

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • Nutch2.1+Hbase+Solr快速搭建一个爬虫和搜索引擎(快速,基本2小时内搞定)

    链接: https://pan.baidu.com/s/1Tut2CcKoJ9-G-HBq8zexMQ 提取码: v75v

    海涛
  • MeritMS+jQuery.Gantt价值管理系统增加项目进度展示

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 第四十九章:SpringBoot2.0新特性 - 你get到WebMvcConfigurer两种配置方式了吗?

    恒宇少年
  • FLAG_ACTIVITY_NEW_TASK和SingleInstance的设计思路(多task的应用)

    这部分的想法都是基于以下两点: 1.Activity可能被复用,可能是复用Activity的功能,还可能是复用Activity的状态; 2.Task的作用:ta...

    梦里茶
  • 目标检测近年综述(文末有下载论文包)

    发展论述:对于Overfeat、R-CNN方法,只是利用卷积神经网络进行特征提取,并没有改变搜索框提取目标区域的策略,算法的在速度上仍存在瓶颈。

    计算机视觉研究院
  • 破解 AI 时代的焦虑 —— 从人机交互到人机协同创作

    这是我在 4 月做的一次分享。大概是我做过的分享中,现场讨论气氛最热烈的一次了。最近抽空整理成文章,希望大家可以继续讨论这个有趣、有争议的话题。

    mixlab
  • Android Activity要点(1)

    叶应是叶

扫码关注云+社区

领取腾讯云代金券