EasyUi控制項中的Datagrid詳解-js教程-PHP中文網

首頁

web前端

js教程

EasyUi控制項中的Datagrid詳解

小云云

Dec 30, 2017 pm 02:13 PM

easyui 詳解

最近手邊有個web項目需要用到第三方控制(EasyUi),用第三方控製做出來的效果畢竟比原生態的要稍微好看那麼一點，該項目中有個需求，需要在數據列表中直接編輯資料保存，行話叫做行內編輯。本文主要介紹了詳解EasyUi控制項中的Datagrid的相關資料,需要的朋友可以參考下，希望能幫助大家。

EasyUi控制項中的Datagrid詳解

在講行內編輯之前，我們需要先了解如何使用EasyUi建立一個DataGrid，當然方式有很多（1.easyui.js，或是直接html程式碼加上easyui的Style），我採用的是JS的方式：

一、使用Js建立DataGrid

上面是效果圖，

Html程式碼如下：在頁面定義一個table

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

登入後複製

Js程式碼如下：

有幾個我自己認為比較重要的屬性在這個標記下

url：這裡是datagrid取得資料集的位址，就是你的Action，需要注意的是，你的Action需要回傳Json格式的數據。

pagination：設定datagrid是否分頁顯示

queryParams：你的查詢條件參數

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

這些屬性在EasyUi的官網都有詳細介紹，我就不深入解釋了。

$("#DataGridInbound").datagrid({
      title: &#39;入库详情&#39;,
      idField: &#39;Id&#39;,
      rownumbers: &#39;true&#39;,
      url: &#39;/Inbound/GetPageInboundGoodsDetail&#39;,
      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(&#39;table tbody&#39;).append(&#39;<tr><td width="&#39; + body.width() + &#39;" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>&#39;);
          $(this).closest(&#39;p.datagrid-wrap&#39;).find(&#39;p.datagrid-pager&#39;).hide();
        }
          //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
        else $(this).closest(&#39;p.datagrid-wrap&#39;).find(&#39;p.datagrid-pager&#39;).show();
      },
      columns: [[
        { field: &#39;ck&#39;, checkbox: true },
        { field: &#39;Id&#39;, hidden: &#39;true&#39; },
        { field: &#39;InBoundId&#39;, hidden: &#39;true&#39; },
        { field: &#39;ProductId&#39;, hidden: &#39;true&#39; },
        { field: &#39;ProductTypeId&#39;, hidden: &#39;true&#39; },
        { field: &#39;SqNo&#39;, title: &#39;入库参考号&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
        {
          field: &#39;Status&#39;, title: &#39;状态&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true,
          formatter: function (value, index, row) {
            if (value == "1") {
              return &#39;<span style="color:green;">已入库</span>&#39;;
            }
            else if (value == "-1") {
              return &#39;<span style="color:#FFA54F;">待入库</span>&#39;;
            }
          }
        },
        {
          field: &#39;InboundDate&#39;, title: &#39;入库日期&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true,          
          formatter: function (date) {
            var pa = /.*\((.*)\)/;
            var unixtime = date.match(pa)[1].substring(0, 10); //通过正则表达式来获取到时间戳的字符串
            return getTime(unixtime);
          }
        },
        { field: &#39;ProductName&#39;, title: &#39;产品名称&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
        { field: &#39;ProductType&#39;, title: &#39;产品类型&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
        { field: &#39;Num&#39;, title: &#39;数量&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
        { field: &#39;Storage&#39;, title: &#39;所属仓库&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
        { field: &#39;CompanyCode&#39;, title: &#39;所属公司&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
        { field: &#39;CreateBy&#39;, title: &#39;操作人&#39;, width: &#39;100&#39;, align: &#39;left&#39;, 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: &#39;Status&#39;, title: &#39;入库状态&#39;, formatter: unitformatter, editor: {
          type: &#39;combobox&#39;, options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
//这部分代码请结合下面的创建Grid的Js代码查看。
$("#dataGrid").datagrid({
    title: "产品列表",
    idField: &#39;ProductID&#39;,
    treeField: &#39;ProductName&#39;,
    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(&#39;table tbody&#39;).append(&#39;<tr><td width="&#39; + body.width() + &#39;" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>&#39;);
        $(this).closest(&#39;p.datagrid-wrap&#39;).find(&#39;p.datagrid-pager&#39;).hide();
      }
        //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
      else $(this).closest(&#39;p.datagrid-wrap&#39;).find(&#39;p.datagrid-pager&#39;).show();
    },
    columns: [[
      { field: &#39;ck&#39;, checkbox: true },
      { field: &#39;ProductID&#39;, title: &#39;产品ID&#39;, hidden: true },
      { field: &#39;CategoryID&#39;, title: &#39;分类ID&#39;, hidden: true },
      { field: &#39;ProductName&#39;, title: &#39;产品名称&#39;, width: &#39;100&#39;, align: &#39;left&#39;, sortable: true },
      { field: &#39;CompanyCode&#39;, title: &#39;所属公司&#39;, width: &#39;100&#39;, align: &#39;center&#39;, sortable: true },
      { field: &#39;CategoryName&#39;, title: &#39;所属分类&#39;, width: &#39;100&#39;, align: &#39;center&#39;, sortable: true },
      { field: &#39;Num&#39;, title: &#39;数量&#39;, editor: &#39;numberbox&#39; },
      {
        field: &#39;Status&#39;, title: &#39;入库状态&#39;, formatter: unitformatter, editor: {
          type: &#39;combobox&#39;, options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
      {
        field: &#39;InDate&#39;, title: &#39;入库日期&#39;, width: &#39;100&#39;, editor: {
          type: &#39;datebox&#39;
        }
      },
      {
        field: &#39;Storage&#39;, width: &#39;100&#39;, title: &#39;所入仓库&#39;,
        formatter: function (value, row) {
          return row.Storage || value;
        },
        editor: {
          type: &#39;combogrid&#39;, options: {
            //url: &#39;/Storage/GetAllStorage&#39;,
            //url:&#39;/Product/GetAllCustomerAddress&#39;,
            rownumbers: true,
            data: $.extend(true, [], sdata),
            idField: &#39;AddressID&#39;,
            textField: &#39;Name&#39;,
            columns: [[
              { field: &#39;AddressID&#39;, hidden: true },
              { field: &#39;Name&#39;, title: &#39;库名&#39; },
              { field: &#39;Country&#39;, title: &#39;国家&#39; },
              { field: &#39;Province&#39;, title: &#39;省份&#39; },
              { field: &#39;City&#39;, title: &#39;市&#39; },
              { field: &#39;Area&#39;, title: &#39;区&#39; },
              { field: &#39;Address&#39;, title: &#39;详细地址&#39; },
            ]],
            loadFilter: function (sdata) {
              if ($.isArray(sdata)) {
                sdata = {
                  total: sdata.length,
                  rows: sdata
                }
              }
              return sdata;
            },
          }
        }
      }
    ]],
    onBeginEdit: function (index, row) {
      var ed = $(this).datagrid(&#39;getEditor&#39;, { index: index, field: &#39;Storage&#39; });
      $(ed.target).combogrid(&#39;setValue&#39;, { AddressID: row.AddressID, Name: row.Name });
    },
    onEndEdit: function (index, row) {
      var ed = $(this).datagrid(&#39;getEditor&#39;, { index: index, field: &#39;Storage&#39; });
      row.Storage = $(ed.target).combogrid(&#39;getText&#39;);
    },
    onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid(&#39;getEditor&#39;, { index: index, field: &#39;Storage&#39; });
      if (ed != undefined) {
        var s = row.Storage;
        for (var i = 0; i < sdata.length; i++) {
          if (s == sdata[i].Name) {
            $(ed.target).combogrid(&#39;setValue&#39;, sdata[i].AddressID);
          }
        }
      }
    }
  });

登入後複製

三、重頭戲，也是我遇到的問題。

描述：我在datagrid中加入了下拉datagrid控件，當我第一次選中後，如果在去點擊datagrid行，選中的下拉datagrid控件的值會被刷掉，這個問題確實困擾我很久，不過後來處理了，那種感覺也是無比的爽啊！

如上效果圖，「所入倉庫」一列，下拉是datagrid，他的專業詞彙叫做「Combogird」。就是這個玩意第一次選取沒問題，第二次點擊會把第一次選取的數值刷掉。這也是一開始我對EasyUi的一個OnClickRow事件不了解。

先來上我之前的錯誤代碼：

onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid(&#39;getEditor&#39;, { index: index, field: &#39;Storage&#39; });
            $(ed.target).combogrid(&#39;setValue&#39;, 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(&#39;getEditor&#39;, { index: index, field: &#39;Storage&#39; });
      if (ed != undefined) {
        var s = row.Storage;
        for (var i = 0; i < sdata.length; i++) {
          if (s == sdata[i].Name) {
            $(ed.target).combogrid(&#39;setValue&#39;, sdata[i].AddressID);
          }
        }
      }
    }

登入後複製

一下是下拉式Grid的資料來源

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

登入後複製

大家學會了嗎？感覺動手嘗試。

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1277

C# 教程

1257

Related knowledge

C++中的眾數函數詳解 Nov 18, 2023 pm 03:08 PM

C++中的眾數函數詳解在統計學中，眾數指的是一組資料中出現次數最多的數值。在C++語言中，我們可以透過寫一個眾數函數來找出任意一組資料中的眾數。眾數函數的實作可以採用多種不同的方法，以下將詳細介紹其中兩種常用的方法。第一種方法是使用哈希表來統計每個數字出現的次數。首先，我們需要定義一個哈希表，將每個數字作為鍵，出現次數作為值。然後，對於給定的資料集，我們遍

Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算

Vue.nextTick函數用法詳解及在非同步更新中的應用 Jul 26, 2023 am 08:57 AM

Vue.nextTick函數用法詳解及在非同步更新中的應用在Vue開發中，經常會遇到需要進行非同步更新資料的情況，例如在修改DOM後需要立即更新資料或在資料更新後需要立即進行相關操作。而Vue提供的.nextTick函數就是為了解決這類問題而出現的。本文將會詳細介紹Vue.nextTick函數的用法，並結合程式碼範例來說明它在非同步更新中的應用。一、Vue.nex

C++中的取餘函式詳解 Nov 18, 2023 pm 02:41 PM

C++中的取餘函數詳解在C++中，取餘運算子（%）用於計算兩個數相除的餘數。它是一種二元運算符，其運算元可以是任何整數型別（包括char、short、int、long等），也可以是浮點數型別（如float、double）。取餘運算子傳回的結果與被除數的符號相同。例如，對於整數的取餘運算，我們可以使用以下程式碼來實作：inta=10;intb=3;

PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模

linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統

Linux的curl指令詳解 Feb 21, 2024 pm 10:33 PM

Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代

See all articles

EasyUi控制項中的Datagrid詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題