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 相关文章推荐
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jQuery文字轮播特效
Feb 12 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
微信小程序实现购物车功能
Nov 18 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
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php-fpm配置详解
2014/02/12 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript 写类方式之五
2009/07/05 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python实现发送邮件及附件功能
2021/03/02 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python读取stdin方法实例
2019/05/24 Python
详解Python3定时器任务代码
2019/09/23 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
学生打架检讨书大全
2014/01/23 职场文书
新年爱情寄语
2014/04/08 职场文书
工程项目经理任命书
2014/06/05 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
劳动仲裁调解书
2015/05/20 职场文书
在校生证明
2015/06/17 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Python学习之包与模块详解
2022/03/19 Python
Golang ort 中的sortInts 方法
2022/04/24 Golang