詳解EasyUi控件中的Datagrid

更新時(shí)間：2017年08月23日 16:17:21 作者：stonewl

這篇文章主要介紹了詳解EasyUi控件中的Datagrid的相關(guān)資料,需要的朋友可以參考下

最近手頭有個(gè)web項(xiàng)目需要用到第三方控件(EasyUi),用第三方控件做出來的效果畢竟比原生態(tài)的要稍微好看那么一點(diǎn)，該項(xiàng)目中有個(gè)需求，需要在數(shù)據(jù)列表中直接編輯數(shù)據(jù)保存，行話叫做行內(nèi)編輯。

在講行內(nèi)編輯之前，我們需要先了解如何使用EasyUi創(chuàng)建一個(gè)DataGrid，當(dāng)然方式有很多（1.easyui.js，或者直接html代碼加easyui的Style），我采用的是JS的方式：

一、使用Js創(chuàng)建DataGrid

上面是效果圖，

Html代碼如下：在頁面定義一個(gè)table

<!--數(shù)據(jù)展示 -->
 <div>
   <table id="DataGridInbound"></table>
 </div>

Js代碼如下：

有幾個(gè)我自己認(rèn)為比較重要的屬性在此標(biāo)記下

url：這里是datagrid獲取數(shù)據(jù)集的地址，就是你的Action，需要注意的是，你的Action需要返回Json格式的數(shù)據(jù)。

pagination：設(shè)置datagrid是否分頁顯示

queryParams：你的查詢條件參數(shù)

formatter：格式化，在日期列用到了，EasyUi的datagrid顯示日期如果不格式話，日期會亂顯示

這些屬性在EasyUi的官網(wǎng)都有詳細(xì)介紹，我就不深入解釋了。

$("#DataGridInbound").datagrid({
      title: '入庫詳情',
      idField: 'Id',
      rownumbers: 'true',
      url: '/Inbound/GetPageInboundGoodsDetail',
      pagination: true,//表示在datagrid設(shè)置分頁       
      rownumbers: true,
      singleSelect: true,
      striped: true,
      nowrap: true,
      collapsible: true,
      fitColumns: true,
      remoteSort: false,
      loadMsg: "正在努力加載數(shù)據(jù)，請稍后...",
      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>暫無數(shù)據(jù)</h1></td></tr>');
          $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
        }
          //如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時(shí)顯示出分頁導(dǎo)航容器
        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: '狀態(tài)', 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); //通過正則表達(dá)式來獲取到時(shí)間戳的字符串
            return getTime(unixtime);
          }
        },
        { field: 'ProductName', title: '產(chǎn)品名稱', width: '100', align: 'left', sortable: true },
        { field: 'ProductType', title: '產(chǎn)品類型', width: '100', align: 'left', sortable: true },
        { field: 'Num', title: '數(shù)量', 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 },
      ]],
    });

二、今天的重點(diǎn)，DataGrid行內(nèi)編輯

如上效果圖，我們在DataGrid行內(nèi)直接變數(shù)據(jù)

Js代碼如下：

如何實(shí)現(xiàn)行內(nèi)編輯，需要在你所編輯的單元格中加入editor屬性，editor屬性有個(gè)type（他支持很多控件類型，可以到官網(wǎng)查看）就是編輯的控件類型。

比如說，上圖中“入庫狀態(tài)”，首先我們定義數(shù)據(jù)源，json格式是重點(diǎn)。

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

然后需要格式轉(zhuǎn)換函數(shù)，不然你選擇的時(shí)候只會顯示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;
      }
    }
  }

如何把數(shù)據(jù)源綁定到DataGrid列中，代碼如下：

formatter：使用我們前面定義的轉(zhuǎn)換格式函數(shù)。

options：中的data就是我們定義的數(shù)據(jù)源。

valueField:選中后的value值，不用詳細(xì)解釋了吧

textField：選中后顯示的值，文本值。

type：combobox，就是下拉選項(xiàng)的樣式。

{
        field: 'Status', title: '入庫狀態(tài)', formatter: unitformatter, editor: {
          type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
//這部分代碼請結(jié)合下面的創(chuàng)建Grid的Js代碼查看。
$("#dataGrid").datagrid({
    title: "產(chǎn)品列表",
    idField: 'ProductID',
    treeField: 'ProductName',
    onClickCell: onClickCell,
    striped: true,
    nowrap: true,
    collapsible: true,
    fitColumns: true,
    remoteSort: false,
    sortOrder: "desc",
    pagination: true,//表示在datagrid設(shè)置分頁       
    rownumbers: true,
    singleSelect: false,
    loadMsg: "正在努力加載數(shù)據(jù)，請稍后...",
    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>暫無數(shù)據(jù)</h1></td></tr>');
        $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
      }
        //如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時(shí)顯示出分頁導(dǎo)航容器
      else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
    },
    columns: [[
      { field: 'ck', checkbox: true },
      { field: 'ProductID', title: '產(chǎn)品ID', hidden: true },
      { field: 'CategoryID', title: '分類ID', hidden: true },
      { field: 'ProductName', title: '產(chǎn)品名稱', 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: '數(shù)量', editor: 'numberbox' },
      {
        field: 'Status', title: '入庫狀態(tài)', 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: '區(qū)' },
              { field: 'Address', title: '詳細(xì)地址' },
            ]],
            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控件，當(dāng)我第一次選中后，如果在去點(diǎn)擊datagrid行，選中的下拉datagrid控件的值會被刷掉，這個(gè)問題確實(shí)困擾我很久，不過后來處理了，那種感覺也是無比的爽啊！

如上效果圖，“所入倉庫”一列，下拉是個(gè)datagrid，他的專業(yè)詞匯叫“Combogird”。就是這個(gè)玩意第一次選中沒問題，第二次點(diǎn)擊會把第一次選中的值刷掉。這也是一開始我對EasyUi的一個(gè)OnClickRow事件不了解。

先來上我之前的錯(cuò)誤代碼：

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

大家伙一定很苦惱這個(gè)row.Name是個(gè)什么玩意？what？其實(shí)我一開始也不知道，因?yàn)檫@個(gè)是錯(cuò)誤代碼，我是病急亂投醫(yī)，胡亂寫的，哈哈，也不是胡亂寫啦，因?yàn)槲业南吕璯rid中有個(gè)字段是Name，然而我把他混淆了，此row是指你點(diǎn)擊的datagrid的row，而不是你數(shù)據(jù)源的row。我也是不斷調(diào)試Js看出來的端倪。我點(diǎn)擊datagrid的時(shí)候，代碼跳入OnClickRow事件中，有句代碼：“var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });”，然后發(fā)現(xiàn)ed為null, Js拋異常，但是界面看不出來，只是把選中的數(shù)據(jù)刷掉了。找到問題后，還是不確定，代碼修改完，再運(yùn)行，正常顯示，也不刷掉我選中的值。

正確代碼如下：

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的數(shù)據(jù)源

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');

總結(jié)

以上所述是小編給大家介紹的EasyUi控件中的Datagrid，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: