相关文章推荐
伤情的脸盆  ·  社区健康服务中心-深圳市卫生健康委员会网站·  6 月前    · 
阳刚的饭盒  ·  北京师范大学文学院中国现当代文学专业(文学创 ...·  1 年前    · 
沉稳的生姜  ·  反渗透净水机不进水了,RO机不制水故障排除方 ...·  1 年前    · 
潇洒的企鹅  ·  郭老八杂粮煎饼(原味) - Weee!·  1 年前    · 
眼睛小的生姜  ·  李彦宏辞任携程董事职务百度仍为携程第一大股东·  1 年前    · 
小百科  ›  在EasyUI的DataGrid中嵌入Combobox-腾讯云开发者社区-腾讯云
combobox datagrid
还单身的黑框眼镜
1 年前
作者头像
DannyHoo
0 篇文章

在EasyUI的DataGrid中嵌入Combobox

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > Danny的专栏 > 在EasyUI的DataGrid中嵌入Combobox

在EasyUI的DataGrid中嵌入Combobox

作者头像
DannyHoo
发布 于 2018-09-13 11:48:55
3.2K 0
发布 于 2018-09-13 11:48:55
举报

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

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

核心代码如下:

<html>
    @*添加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>
        <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\":\"否\"}]";          
 
推荐文章
伤情的脸盆  ·  社区健康服务中心-深圳市卫生健康委员会网站
6 月前
阳刚的饭盒  ·  北京师范大学文学院中国现当代文学专业(文学创作方向) 2021年 ...
1 年前
沉稳的生姜  ·  反渗透净水机不进水了,RO机不制水故障排除方法大全- 知乎
1 年前
潇洒的企鹅  ·  郭老八杂粮煎饼(原味) - Weee!
1 年前
眼睛小的生姜  ·  李彦宏辞任携程董事职务百度仍为携程第一大股东
1 年前
Link管理   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南