首頁 > web前端 > js教程 > EasyUi控制項中的Datagrid詳解

EasyUi控制項中的Datagrid詳解

小云云
發布: 2022-04-08 20:04:15
原創
24795 人瀏覽過

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

EasyUi控制項中的Datagrid詳解

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

   一、使用Js建立DataGrid

上面是效果圖,

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


1

2

3

4

<!--数据展示 -->

 <p>

   <table id="DataGridInbound"></table>

 </p>

登入後複製

 Js程式碼如下:

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

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

pagination:設定datagrid是否分頁顯示

queryParams:你的查詢條件參數

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

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

$("#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格式是重點。


1

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

登入後複製

然後需要格式轉換函數,不然你選擇的時候只會顯示value值,不是顯示文字值。程式碼如下:


1

2

3

4

5

6

7

8

9

10

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,就是下拉選項的樣式。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

{

        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事件不了解。

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


1

2

3

4

5

6

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拋異常,但是介面看不出來,只是把選取的資料刷掉了。找到問題後,還是不確定,程式碼修改完,再運行,正常顯示,也不刷掉我選取的值。

正確程式碼如下:


1

2

3

4

5

6

7

8

9

10

11

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的資料來源


##

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

登入後複製
大家學會了嗎?感覺動手嘗試。


相關推薦:

詳解EasyUI的DataGrid綁定Json資料來源方法

easyui的datagrid元件頁面載入後發送兩次請求的解決辦法

EasyUI之dataGrid的行內編輯

以上是EasyUi控制項中的Datagrid詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板