jQuery Easyui datagrid editor为combobox时指定数据源实例


Posted in Javascript onDecember 19, 2016

当在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 datagrid editor为combobox时指定数据源实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JavaScript作用域链示例分享
May 27 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 #Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 #Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 #Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 #Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
php代码优化及php相关问题总结
2006/10/09 PHP
php创建多级目录代码
2008/06/05 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
法制宣传日活动总结
2014/04/29 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
五年级学生评语大全
2014/12/26 职场文书
医德医风个人总结
2015/02/28 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2016年清明节寄语
2015/12/04 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
MySQL中order by的执行过程
2022/06/05 MySQL