欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » EasyUI开发经验汇总 » 正文

为EasyUI的DataGrid某单元格单独赋值示例

创建时间:2017年09月16日 08:59  阅读次数:(4766)
分享到:
EasyUI并没有提供官方的方法为DataGrid的单元格赋值的方法,这点不得不吐槽一下,这么个简单的功能折腾了我好几天,试过N多种方法,都不是很好,都有各式各样的问题。比如你想使用updateRow,不好意思,updateRow后,这行就不能使用grid.datagrid('getChanges', 'updated')来获取这列的数据了。下面是我最后的解决方法,代码如下:
var EasyUIDataGrid = {
 //设置列的值(适用于所有列)
    setFieldValue: function (fieldName, value, index, grid) {
        if (grid == undefined || grid == '') {
            grid = $('#editgrid');
        }

        if (index == undefined || index == '') {
            index = this.GeteditIndex(grid);
            if (index == undefined) {
                index = 0;
            }
        }
        var row = grid.datagrid('getRows')[index];
        if (row != null) {
            var editor = grid.datagrid('getEditor', { index: index, field: fieldName });
            if (editor != null) {
                this.setValueToEditor(editor, value);
            }
            else {
                var view = $('.datagrid-view');
                for (var i = 0; i < view.length; i++) {
                    if ($(view[i]).children(grid.selector).length  > 0) {
                        var view = $(view[i]).children('.datagrid-view2');
                        var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
                        var div = $(td).find('div')[0];
                        $(div).text(value);
                    }
                }

                row[fieldName] = value;
            }
            grid.datagrid('clearSelections');
        }
    },

    //设置datagrid的编辑器的值
    setValueToEditor: function (editor, value) {
        switch (editor.type) {
            case "combobox":
                editor.target.combobox("setValue", value);
                break;
            case "combotree":
                editor.target.combotree("setValue", value);
                break;
            case "textbox":
                editor.target.textbox("setValue", value);
                break;
            case "numberbox":
                editor.target.numberbox("setValue", value);
                break;
            case "datebox":
                editor.target.datebox("setValue", value);
                break;
            case "datetimebox":
                editor.target.datebox("setValue", value);
                break;
            default:
                editor.html = value;
                break;
        }
    }
}

从上面代码段可以看出来,我的意路是,如果该列有编辑器,那非常好办,直接获取该单元格的编辑器,为该编辑器赋值即可。但如果这列没有编辑器呢?看下面两段关键的代码 。
for (var i = 0; i < view.length; i++) {
    if ($(view[i]).children(grid.selector).length  > 0) {
        var view = $(view[i]).children('.datagrid-view2');
        var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
        var div = $(td).find('div')[0];
        $(div).text(value);
    }
}

这段代码是datagrid经解析后的dom,我们直接操作dom显示值,有for循环是因为需要判断一个页面中存在多个datagrid的情况,可能不同的版本解析后的dom有所区别,这就需要大家自己慢慢再调试了。。但仅仅这样处理还不够,因为仅是这样处理,我们使用getChanges方法是取不到这个单元格的值的,所以还得为这行数据再赋值一次,就是:row[fieldName] = value 这句关键的代码了。

可能你会想到,那为什么我们不直接写row[fieldName] = value就好了。因为直接写row[fieldName] = value,getChanges方法是可以取到值的,但界面上却不能及时的将值显示出来,必须强制刷新这行数据才能显示,而刷新又会丢失掉该行中另外一些编辑器的值,所以,把显示和真正赋值两者分开,就较好的解决这个问题了。
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 36+52=? 的结果(结果是:88)
结  果: