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 相关文章推荐
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JavaScript中CreateTextFile函数
Aug 30 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获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JS获取时间的方法
2015/01/21 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Python配置mysql的教程(推荐)
2017/10/13 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python的中异常处理机制
2018/08/30 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
教师节活动主持词
2014/04/02 职场文书
开学典礼策划方案
2014/05/28 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014年手术室工作总结
2014/11/26 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
长江七号观后感
2015/06/11 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
防震减灾主题班会
2015/08/14 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书