[asp.net] 解决easyui datagrid中combobox无法数据回显问题

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

项目中在easyui启用行编辑模式后,每次编辑数据,combobox下拉列表都会重新刷新,不能回显原先的数据,导致用户在修改信息时还需要记住之前的信息,用户体验较差,下拉列表较少的情况下还好,如果较多,用户还需要一个接一个地重新选择,给用户带来了很大的麻烦。为了增强用户使用的简便性,有必要为combobox添加数据的回显功能。具体的实现方案如下:

1.定义一个全局变量tmpRowData,用于记录当前编辑行的数据;

2.在datagrid中的onBeforeEdit事件中将编辑行数据保存到全局变量中;


这里需要注意,onBeforeEdit中的row即我们需要的行数据,只需要我们将其赋值给我们的全局变量tmpRowData即可。

3.在combobox的onLoadSuccess事件中,将全局变量中保存的combobox数据赋值给combobox。


即通过combobox的setValue方法将combobox的值设置为全局变量tmpRowData中的数据:

$(this).combobox('setValue', tmpRowData.JZId);

具体的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>咨询列表</title>
    <meta http-equiv="pragma" content="no-cache" />
    <script src="/Scripts/loading.js" type="text/javascript"></script>
    <link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
    <script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var datagrid; //定义全局变量datagrid
            var editRow = undefined; //定义全局变量:当前编辑的行
            var tmpRowData = undefined;
            datagrid = $("#dd").datagrid({
                url: '/ZX/ZXHandler.ashx?action=GetAll', //请求的数据源
                title: '咨询列表',
                iconCls: 'icon-edit', //图标
                pagination: true, //显示分页
                pageSize: 10, //页大小
                pageList: [10, 20, 30, 40], //页大小下拉选项此项各value是pageSize的倍数
                fit: true, //datagrid自适应宽度
                fitColumn: false, //列自适应宽度
                striped: true, //行背景交换
                nowap: true, //列内容多时自动折至第二行
                border: true,
                idField: 'Id', //主键
                columns: [[//显示的列
                {field: 'ck', checkbox: true },
                { field: 'Id', title: '咨询编号', width: 100, align: 'center' },
                { field: 'Name', title: '专家名', width: 155, align: 'center',
                    editor: { type: 'combobox', options: {
                        required: true, url: '/User/UserHandler.ashx?action=GetAllZJUName', valueField: 'text', textField: 'id',
                        onLoadSuccess: function () {
                            $(this).combobox('setValue', tmpRowData.Name);
                        }
                    }
                    }
                },
                { field: 'JZId', title: '机组编号', width: 130, align: 'center',
                    editor: { type: 'combobox', options: {
                        valueField: 'text', textField: 'id', url: '/JZ/JZHandler.ashx?action=GetAllJZId', required: true,
                        onLoadSuccess: function () {
                            $(this).combobox('setValue', tmpRowData.JZId);
                        }
                    }
                    }
                }
                ]],
                toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加,修改,删除等
                    //添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑
                    if (editRow != undefined) {
                        datagrid.datagrid("endEdit", editRow);
                    }
                    //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
                    if (editRow == undefined) {
                        datagrid.datagrid("insertRow", {
                            index: 0, // index start with 0
                            row: {

                            }
                        });
                        //将新插入的那一行开户编辑状态
                        datagrid.datagrid("beginEdit", 0);
                        //给当前编辑的行赋值
                        editRow = 0;
                        //选中首行
                        datagrid.datagrid('unselectAll');
                        datagrid.datagrid('selectRow', 0); //选中该行
                    }
                }
                },
                '-',
                 { text: '删除', iconCls: 'icon-remove', handler: function () {
                     //删除时先获取选择行
                     var rows = datagrid.datagrid("getSelections");
                     //选择要删除的行
                     if (rows.length > 0) {
                         $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                             if (r) {
                                 //获取所有要删除的用户的编号
                                 var ids = [];
                                 for (var i = 0; i < rows.length; i++) {
                                     ids.push(rows[i].Id);
                                 }
                                 //执行数据删除操作
                                 $.ajax({
                                     url: '/ZX/ZXHandler.ashx?action=Delete',
                                     type: 'POST',
                                     data: {
                                         Id: ids.join(',')
                                     },
                                     beforeSend: function () {
                                         $.messager.progress({
                                             text: '正在处理中...'
                                         });
                                     },
                                     success: function (data) {
                                         $.messager.progress('close');
                                         data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                                         if (data.Success) {
                                             datagrid.datagrid('reload');
                                             $.messager.show({
                                                 title: '操作提醒',
                                                 msg: data.Message
                                             })
                                         } else {
                                             $.messager.alert('删除失败', data.Message, 'warning');
                                         }
                                         location.reload();
                                     }
                                 });
                             }
                         });
                     }
                     else {
                         $.messager.alert("提示", "请选择要删除的行", "error");
                     }
                 }
                 }, '-',
                 { text: '修改', iconCls: 'icon-edit', handler: function () {
                     //修改时要获取选择到的行
                     var rows = datagrid.datagrid("getSelections");
                     //如果只选择了一行则可以进行修改,否则不操作
                     if (rows.length == 1) {
                         //修改之前先关闭已经开启的编辑行,当调用endEdit该方法时会触发onAfterEdit事件
                         if (editRow != undefined) {
                             datagrid.datagrid("endEdit", editRow);
                         }
                         //当无编辑行时
                         if (editRow == undefined) {
                             //获取到当前选择行的下标
                             var index = datagrid.datagrid("getRowIndex", rows[0]);
                             //开启编辑
                             datagrid.datagrid("beginEdit", index);
                             //把当前开启编辑的行赋值给全局变量editRow
                             editRow = index;
                             //当开启了当前选择行的编辑状态之后,
                             //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
                             datagrid.datagrid("unselectAll");
                         }
                     }
                 }
                 }, '-',
                 { text: '保存', iconCls: 'icon-save', handler: function () {
                     //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                     datagrid.datagrid("endEdit", editRow);
                 }
                 }, '-',
                 { text: '取消编辑', iconCls: 'icon-redo', handler: function () {
                     //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                     editRow = undefined;
                     datagrid.datagrid("rejectChanges");
                     datagrid.datagrid("unselectAll");
                 }
                 }, '-'],
                onBeforeEdit: function (index, row) {
                    tmpRowData = row;
                },
                onAfterEdit: function (rowIndex, rowData, changes) {
                    //endEdit该方法触发此事件
                    var inserted = datagrid.datagrid('getChanges', 'inserted');
                    var updated = datagrid.datagrid('getChanges', 'updated');
                    if (inserted.length < 1 && updated.length < 1) {
                        editRow = undefined;
                        datagrid.datagrid('unselectAll');
                        return;
                    }
                    var url = '';
                    if (inserted.length > 0) {
                        url = '/ZX/ZXHandler.ashx?action=Add';
                    }
                    if (updated.length > 0) {
                        url = '/ZX/ZXHandler.ashx?action=Update';
                    }
                    //更新数据库
                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: {
                            'Id': rowData.Id,
                            'Name': rowData.Name,
                            'JZId': rowData.JZId
                        },
                        beforeSend: function () {
                            $.messager.progress({
                                text: '正在处理中...'
                            })
                        },
                        success: function (data) {
                            $.messager.progress('close');
                            data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                            if (data.Success) {
                                datagrid.datagrid("acceptChanges");
                                $.messager.show({
                                    title: '操作提示',
                                    msg: data.Message
                                });
                                editRow = undefined;
                                datagrid.datagrid("reload");
                                $('#addcheck').val(1);
                            } else {
                                datagrid.datagrid("beginEdit", editRow);
                                $.messager.alert('警告操作', '未知错误!请重新刷新后提交!', 'warning');
                            }
                            datagrid.datagrid("unselectAll");
                        }
                    });
                },
                onDblClickRow: function (rowIndex, rowData) {
                    datagrid.datagrid('unselectAll');
                    datagrid.datagrid('selectRow', rowIndex); //选中该行
                    //双击开启编辑行
                    if (editRow != undefined) {
                        datagrid.datagrid("endEdit", editRow);
                    }
                    if (editRow == undefined) {
                        datagrid.datagrid("beginEdit", rowIndex);
                        editRow = rowIndex;
                    }
                }
            });
            var p = datagrid.datagrid('getPager');
            $(p).pagination({
                pageSize: 10, //每页显示的记录条数,默认为10  
                pageList: [5, 10, 15], //可以设置每页记录条数的列表  
                beforePageText: '第', //页数文本框前显示的汉字  
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });
        });
    </script>
</head>
<body>
    <table id="dd">
    </table>
</body>
</html>

了解easyui各个控件的事件对于大家深入了解easyui具有很大的帮助,笔者建议初学者找一下较为详细的API文档阅读。

没有更多推荐了,返回首页