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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
react-redux中connect()方法详细解析
2017/05/27 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
vue 插件的方法代码详解
2019/06/06 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
python Celery定时任务的示例
2018/03/13 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python实现在线翻译功能
2020/03/03 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
触电现场处置方案
2014/05/14 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python