详解EasyUi控件中的Datagrid

     最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点，该项目中有个需求，需要在数据列表中直接编辑数据保存，行话叫做行内编辑。

   在讲行内编辑之前，我们需要先了解如何使用EasyUi创建一个DataGrid，当然方式有很多（1.easyui.js，或者直接html代码加easyui的Style），我采用的是JS的方式：

   一、使用Js创建DataGrid

上面是效果图，

Html代码如下：在页面定义一个table

<!--数据展示 -->
 <div>
   <table id="DataGridInbound"></table>
 </div>

 Js代码如下：

 有几个我自己认为比较重要的属性在此标记下

url：这里是datagrid获取数据集的地址，就是你的Action，需要注意的是，你的Action需要返回Json格式的数据。

pagination：设置datagrid是否分页显示

queryParams：你的查询条件参数

formatter：格式化，在日期列用到了，EasyUi的datagrid显示日期如果不格式话，日期会乱显示

这些属性在EasyUi的官网都有详细介绍，我就不深入解释了。

$("#DataGridInbound").datagrid({
      title: '入库详情',
      idField: 'Id',
      rownumbers: 'true',
      url: '/Inbound/GetPageInboundGoodsDetail',
      pagination: true,//表示在datagrid设置分页       
      rownumbers: true,
      singleSelect: true,
      striped: true,
      nowrap: true,
      collapsible: true,
      fitColumns: true,
      remoteSort: false,
      loadMsg: "正在努力加载数据，请稍后...",
      queryParams: { ProductName: "", Status: "",SqNo:"" },
      onLoadSuccess: function (data) {
        if (data.total == 0) {
          var body = $(this).data().datagrid.dc.body2;
          body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
          $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
        }
          //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
        else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
      },
      columns: [[
        { field: 'ck', checkbox: true },
        { field: 'Id', hidden: 'true' },
        { field: 'InBoundId', hidden: 'true' },
        { field: 'ProductId', hidden: 'true' },
        { field: 'ProductTypeId', hidden: 'true' },
        { field: 'SqNo', title: '入库参考号', width: '100', align: 'left', sortable: true },
        {
          field: 'Status', title: '状态', width: '100', align: 'left', sortable: true,
          formatter: function (value, index, row) {
            if (value == "1") {
              return '<span style="color:green;">已入库</span>';
            }
            else if (value == "-1") {
              return '<span style="color:#FFA54F;">待入库</span>';
            }
          }
        },
        {
          field: 'InboundDate', title: '入库日期', width: '100', align: 'left', sortable: true,          
          formatter: function (date) {
            var pa = /.*\((.*)\)/;
            var unixtime = date.match(pa)[1].substring(0, 10); //通过正则表达式来获取到时间戳的字符串
            return getTime(unixtime);
          }
        },
        { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },
        { field: 'ProductType', title: '产品类型', width: '100', align: 'left', sortable: true },
        { field: 'Num', title: '数量', width: '100', align: 'left', sortable: true },
        { field: 'Storage', title: '所属仓库', width: '100', align: 'left', sortable: true },
        { field: 'CompanyCode', title: '所属公司', width: '100', align: 'left', sortable: true },
        { field: 'CreateBy', title: '操作人', width: '100', align: 'left', sortable: true },
      ]],
    });

二、今天的重点，DataGrid行内编辑

如上效果图，我们在DataGrid行内直接变数据

Js代码如下：

如何实现行内编辑，需要在你所编辑的单元格中加入editor属性，editor属性有个type（他支持很多控件类型，可以到官网查看）就是编辑的控件类型。

比如说，上图中“入库状态”，首先我们定义数据源，json格式是重点。

var InboundStatus = [{ "value": "1", "text": "入库" }, { "value": "-1", "text": "待入库" }];

然后需要格式转换函数，不然你选择的时候只会显示value值，不是显示文本值。代码如下：

function unitformatter(value, rowData, rowIndex) {
    if (value == 0) {
      return;
    }
    for (var i = 0; i < InboundStatus.length; i++) {
      if (InboundStatus[i].value == value) {
        return InboundStatus[i].text;
      }
    }
  }

如何把数据源绑定到DataGrid列中，代码如下：

formatter：使用我们前面定义的转换格式函数。

options：中的data就是我们定义的数据源。

valueField:选中后的value值，不用详细解释了吧

textField：选中后显示的值，文本值。

type：combobox，就是下拉选项的样式。

{
        field: 'Status', title: '入库状态', formatter: unitformatter, editor: {
          type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
//这部分代码请结合下面的创建Grid的Js代码查看。
$("#dataGrid").datagrid({
    title: "产品列表",
    idField: 'ProductID',
    treeField: 'ProductName',
    onClickCell: onClickCell,
    striped: true,
    nowrap: true,
    collapsible: true,
    fitColumns: true,
    remoteSort: false,
    sortOrder: "desc",
    pagination: true,//表示在datagrid设置分页       
    rownumbers: true,
    singleSelect: false,
    loadMsg: "正在努力加载数据，请稍后...",
    url: "/Inbound/GetProductPage",
    onLoadSuccess: function (data) {
      if (data.total == 0) {
        var body = $(this).data().datagrid.dc.body2;
        body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
        $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
      }
        //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
      else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
    },
    columns: [[
      { field: 'ck', checkbox: true },
      { field: 'ProductID', title: '产品ID', hidden: true },
      { field: 'CategoryID', title: '分类ID', hidden: true },
      { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },
      { field: 'CompanyCode', title: '所属公司', width: '100', align: 'center', sortable: true },
      { field: 'CategoryName', title: '所属分类', width: '100', align: 'center', sortable: true },
      { field: 'Num', title: '数量', editor: 'numberbox' },
      {
        field: 'Status', title: '入库状态', formatter: unitformatter, editor: {
          type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
      {
        field: 'InDate', title: '入库日期', width: '100', editor: {
          type: 'datebox'
        }
      },
      {
        field: 'Storage', width: '100', title: '所入仓库',
        formatter: function (value, row) {
          return row.Storage || value;
        },
        editor: {
          type: 'combogrid', options: {
            //url: '/Storage/GetAllStorage',
            //url:'/Product/GetAllCustomerAddress',
            rownumbers: true,
            data: $.extend(true, [], sdata),
            idField: 'AddressID',
            textField: 'Name',
            columns: [[
              { field: 'AddressID', hidden: true },
              { field: 'Name', title: '库名' },
              { field: 'Country', title: '国家' },
              { field: 'Province', title: '省份' },
              { field: 'City', title: '市' },
              { field: 'Area', title: '区' },
              { field: 'Address', title: '详细地址' },
            ]],
            loadFilter: function (sdata) {
              if ($.isArray(sdata)) {
                sdata = {
                  total: sdata.length,
                  rows: sdata
                }
              }
              return sdata;
            },
          }
        }
      }
    ]],
    onBeginEdit: function (index, row) {
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      $(ed.target).combogrid('setValue', { AddressID: row.AddressID, Name: row.Name });
    },
    onEndEdit: function (index, row) {
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      row.Storage = $(ed.target).combogrid('getText');
    },
    onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      if (ed != undefined) {
        var s = row.Storage;
        for (var i = 0; i < sdata.length; i++) {
          if (s == sdata[i].Name) {
            $(ed.target).combogrid('setValue', sdata[i].AddressID);
          }
        }
      }
    }
  });

三、重头戏，也是我遇到的问题。

描述：我在datagrid中添加了下拉datagrid控件，当我第一次选中后，如果在去点击datagrid行，选中的下拉datagrid控件的值会被刷掉，这个问题确实困扰我很久，不过后来处理了，那种感觉也是无比的爽啊！

如上效果图，“所入仓库”一列，下拉是个datagrid，他的专业词汇叫“Combogird”。就是这个玩意第一次选中没问题，第二次点击会把第一次选中的值刷掉。这也是一开始我对EasyUi的一个OnClickRow事件不了解。

先来上我之前的错误代码：

onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
            $(ed.target).combogrid('setValue', row.Name);
        }
      }
    }

大家伙一定很苦恼这个row.Name是个什么玩意？what？其实我一开始也不知道，因为这个是错误代码，我是病急乱投医，胡乱写的，哈哈，也不是胡乱写啦，因为我的下拉grid中有个字段是Name，然而我把他混淆了，此row是指你点击的datagrid的row，而不是你数据源的row。我也是不断调试Js看出来的端倪。我点击datagrid的时候，代码跳入OnClickRow事件中，有句代码：“var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });”，然后发现ed为null, Js抛异常，但是界面看不出来，只是把选中的数据刷掉了。找到问题后，还是不确定，代码修改完，再运行，正常显示，也不刷掉我选中的值。

正确代码如下：

onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      if (ed != undefined) {
        var s = row.Storage;
        for (var i = 0; i < sdata.length; i++) {
          if (s == sdata[i].Name) {
            $(ed.target).combogrid('setValue', sdata[i].AddressID);
          }
        }
      }
    }

 一下是下拉Grid的数据源

function synchroAjaxByUrl(url) {
    var temp;
    $.ajax({
      url: url,
      async: false,
      type: 'get',
      dataType: "json",
      success: function (data) {
        temp = data;
      }
    });
    return temp;
  }
  var sdata = synchroAjaxByUrl('/Product/GetAllCustomerAddress');

总结

以上所述是小编给大家介绍的EasyUi控件中的Datagrid，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# easyui  # 控件datagrid  # jQuery EasyUI API 中文文档 - DataGrid数据表格  # Jquery下EasyUI组件中的DataGrid结果集清空方法  # jQuery easyui datagrid动态查询数据实例讲解  # 扩展easyui.datagrid  # 添加数据loading遮罩效果代码  # jQuery EasyUI datagrid实现本地分页的方法  # jQuery EasyUI之DataGrid使用实例详解  # jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据  # 实现easyui的datagrid导出为excel的示例代码  # jquery Easyui Datagrid实现批量操作（编辑  # 删除  # 添加）  # EasyUI使用DataGrid实现动态列数据绑定  # 分页  # 有个  # 的是  # 加载  # 是个  # 也不  # 暂无  # 在此  # 第三方  # 小编  # 官网  # 请稍后  # 我是  # 错误代码  # 病急乱投医  # 都有  # 我在  # 有很多  # 就不  # 我一 

相关文章： C++时间戳转换成日期时间的步骤和示例代码  建站主机解析：虚拟主机配置与服务器选择指南  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  ,购物网站怎么盈利呢？  开心动漫网站制作软件下载,十分开心动画为何停播？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  宝塔建站助手安装配置与建站模板使用全流程解析  如何通过远程VPS快速搭建个人网站？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  如何基于PHP生成高效IDC网络公司建站源码？  如何在服务器上三步完成建站并提升流量？  昆明高端网站制作公司,昆明公租房申请网上登录入口？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  建站之星收费标准详解：套餐费用及年费价格表一览  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  建站之星各版本价格是多少？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  TestNG的testng.xml配置文件怎么写  h5在线制作网站电脑版下载,h5网页制作软件？  ,柠檬视频怎样兑换vip？  北京的网站制作公司有哪些,哪个视频网站最好？  小型网站建站如何选择虚拟主机？  建站主机类型有哪些？如何正确选型  网站制作模板下载什么软件,ppt模板免费下载网站？  电商平台网站制作流程,电商网站如何制作？  如何在阿里云通过域名搭建网站？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  建站主机如何安装配置？新手必看操作指南  视频网站制作教程,怎么样制作优酷网的小视频？  定制建站方案优化指南：企业官网开发与建站费用解析  如何使用Golang table-driven基准测试_多组数据测量函数效率  兔展官网 在线制作,怎样制作微信请帖？  如何配置IIS站点权限与局域网访问？  已有域名和空间，如何快速搭建网站？  制作网站外包平台,自动化接单网站有哪些？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  如何在Golang中引入测试模块_Golang测试包导入与使用实践  广州建站公司哪家好？十大优质服务商推荐  如何在宝塔面板中修改默认建站目录？  Android自定义listview布局实现上拉加载下拉刷新功能  建站主机是否属于云主机类型？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何用低价快速搭建高质量网站？  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  如何基于云服务器快速搭建个人网站？