jQuery Easyui datagrid editor为combobox时指定数据源实例
更新时间:2016年12月19日 14:46:48 作者:garfieldzf
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例,有兴趣的可以了解一下。
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存,此时显示的是value值,而不是text值,这时使用格式化函数解决此问题。
var Address = [{ "value": "1", "text": "CHINA" }, { "value": "2", "text": "USA" }, { "value": "3", "text": "Koren" }]; function unitformatter(value, rowData, rowIndex) { if (value == 0) { return; } for (var i = 0; i < Address.length; i++) { if (Address[i].value == value) { return Address[i].text; } } } function GetTable() { var editRow = undefined; $("#Student_Table").datagrid({ height: 300, width: 450, title: '学生表', collapsible: true, singleSelect: true, url: '/Home/StuList', idField: 'ID', columns: [[ { field: 'ID', title: 'ID', width: 100 }, { field: 'Name', title: '姓名', width: 100, editor: { type: 'text', options: { required: true } } }, { field: 'Age', title: '年龄', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } }, { field: 'Address', title: '地址', width: 100, formatter: unitformatter, align: 'center', editor: { type: 'combobox', options: { data: Address, valueField: "value", textField: "text" } } } ]], toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () { if (editRow != undefined) { $("#Student_Table").datagrid('endEdit', editRow); } if (editRow == undefined) { $("#Student_Table").datagrid('insertRow', { index: 0, row: {} }); $("#Student_Table").datagrid('beginEdit', 0); editRow = 0; } } }, '-', { text: '保存', iconCls: 'icon-save', handler: function () { $("#Student_Table").datagrid('endEdit', editRow); //如果调用acceptChanges(),使用getChanges()则获取不到编辑和新增的数据。 //使用JSON序列化datarow对象,发送到后台。 var rows = $("#Student_Table").datagrid('getChanges'); var rowstr = JSON.stringify(rows); $.post('/Home/Create', rowstr, function (data) { }); } }, '-', { text: '撤销', iconCls: 'icon-redo', handler: function () { editRow = undefined; $("#Student_Table").datagrid('rejectChanges'); $("#Student_Table").datagrid('unselectAll'); } }, '-', { text: '删除', iconCls: 'icon-remove', handler: function () { var row = $("#Student_Table").datagrid('getSelections'); } }, '-', { text: '修改', iconCls: 'icon-edit', handler: function () { var row = $("#Student_Table").datagrid('getSelected'); if (row != null) { if (editRow != undefined) { $("#Student_Table").datagrid('endEdit', editRow); } if (editRow == undefined) { var index = $("#Student_Table").datagrid('getRowIndex', row); $("#Student_Table").datagrid('beginEdit', index); editRow = index; $("#Student_Table").datagrid('unselectAll'); } } else { } } }, '-', { text: '上移', iconCls: 'icon-up', handler: function () { MoveUp(); } }, '-', { text: '下移', iconCls: 'icon-down', handler: function () { MoveDown(); } }], onAfterEdit: function (rowIndex, rowData, changes) { editRow = undefined; }, onDblClickRow: function (rowIndex, rowData) { if (editRow != undefined) { $("#Student_Table").datagrid('endEdit', editRow); } if (editRow == undefined) { $("#Student_Table").datagrid('beginEdit', rowIndex); editRow = rowIndex; } }, onClickRow: function (rowIndex, rowData) { if (editRow != undefined) { $("#Student_Table").datagrid('endEdit', editRow); } } }); }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Jquery Easyui进度条组件Progress使用详解(8)
- 如何解决jQuery EasyUI 已打开Tab重新加载问题
- jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
- Jquery Easyui选项卡组件Tab使用详解(10)
- Jquery Easyui菜单组件Menu使用详解(15)
- Jquery Easyui自定义下拉框组件使用详解(21)
- Jquery Easyui搜索框组件SearchBox使用详解(19)
- jQuery Easyui 下拉树组件combotree
- jQuery Easyui datagrid连续发送两次请求问题
- 详解Jquery Easyui的验证扩展
相关文章
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
这篇文章主要介绍了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较,结合实例形式分析了jQuery事件模型默认行为执行顺序相关原理,以及trigger()与 triggerHandler()的异同点比较,需要的朋友可以参考下2020-04-04Jquery on("click")方法绑定事件后执行多次的解决方法
这篇文章主要给大家介绍了关于Jquery on("click")方法绑定事件后执行多次的解决方法,文章通过实例代码以及图文介绍的非常详细,对大家学习或者使用jQuery具有一定的参考学习价值,需要的朋友可以参考下2023-06-06jquery的clone方法应用于textarea和select的bug修复
textarea和select的值clone的时候会丢掉,在clone的时候将val再重新赋值一下,如果知道这个了就加单了2014-06-06为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
在使用jquery.ui.dialog的过程中,发现position参数有些问题,无法通过position: [PosX, PosY]动态传递位置参数。下面是官方demo 代码2009-11-11
最新评论