suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erklärung von Datagrid in der EasyUi-Steuerung

Ausführliche Erklärung von Datagrid in der EasyUi-Steuerung

小云云
小云云Original
2017-12-30 14:13:3224692Durchsuche

Vor kurzem habe ich ein Webprojekt, das die Verwendung von Steuerelementen von Drittanbietern erfordert (EasyUi). Schließlich ist der Effekt, der durch die Verwendung von Steuerelementen von Drittanbietern erzielt wird, etwas besser als beim Original , das in der Datenliste enthalten sein muss. Die direkte Bearbeitung von Datenspeicherungen wird im Fachjargon als Inline-Bearbeitung bezeichnet. In diesem Artikel werden hauptsächlich die relevanten Informationen zu Datagrid in der EasyUi-Steuerung im Detail vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.

Ausführliche Erklärung von Datagrid in der EasyUi-Steuerung

Bevor wir über die Inline-Bearbeitung sprechen, müssen wir zunächst verstehen, wie man mit EasyUi ein DataGrid erstellt. Natürlich gibt es viele Möglichkeiten (1.easyui.js , oder direkter HTML-Code plus easyui-Stil), verwende ich die JS-Methode:

1. Verwenden Sie Js, um DataGrid zu erstellen

Das Obige ist das Rendering,

Der HTML-Code lautet wie folgt: Definieren Sie eine Tabelle auf der Seite


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

Der Js-Code lautet wie folgt:

Unter diesem Tag gibt es mehrere Attribute, die meiner Meinung nach wichtig sind

URL: Dies ist die Adresse, an die das Datagrid den Datensatz erhält. Das ist Ihre Aktion. Beachten Sie, dass Ihre Aktion Daten im Json-Format zurückgeben muss.

Paginierung: Legen Sie fest, ob das Datagrid in Paginierung angezeigt wird.

queryParams: Ihre Abfragebedingungsparameter.

Formatter: Formatierung, wird in der Datumsspalte verwendet. Das Datagrid von EasyUi zeigt das Datum an, wenn nicht In Bezug auf das Format wird das Datum zufällig angezeigt

Diese Attribute werden auf der offiziellen Website von EasyUi ausführlich vorgestellt, daher werde ich sie nicht näher erläutern. 


$("#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 },
      ]],
    });

2. Der heutige Schwerpunkt: DataGrid-Inline-Bearbeitung

Wie im obigen Rendering gezeigt, ändern wir Daten direkt in der DataGrid-Zeile

Der Js-Code lautet wie folgt:

So implementieren Sie die Inline-Bearbeitung Sie müssen die Zelle in der Zelle, die Sie bearbeiten, bearbeiten. Fügen Sie dem Editor-Attribut einen Typ hinzu (es unterstützt viele Steuerelementtypen, Sie können es auf der offiziellen Website überprüfen). Bearbeitungskontrolle.

Zum Beispiel definieren wir im „Lagerstatus“ im obigen Bild zuerst die Datenquelle, und das JSON-Format steht im Mittelpunkt. 


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

Dann benötigen Sie eine Formatkonvertierungsfunktion, sonst wird bei der Auswahl nur der Wert angezeigt, nicht der Textwert. Der Code lautet wie folgt: 


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

So binden Sie die Datenquelle an die DataGrid-Spalte. Der Code lautet wie folgt:

Formatierer: Verwenden Das Konvertierungsformat, das wir zuvor definiert haben.

Optionen: Die Daten in sind die von uns definierte Datenquelle.

valueField: Der Wert nach der Auswahl, es ist nicht erforderlich, ihn im Detail zu erklären.

textField: Der nach der Auswahl angezeigte Wert, Textwert.

Typ: Kombinationsfeld, das ist der Stil der Dropdown-Option. 


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

Drittens ist das Highlight auch das Problem, auf das ich gestoßen bin.

Beschreibung: Ich habe dem Datagrid ein Dropdown-Datagrid-Steuerelement hinzugefügt. Wenn ich es zum ersten Mal auswähle und auf die Datagrid-Zeile klicke, wird der Wert des ausgewählten Dropdown-Elements angezeigt. Die Datagrid-Steuerung wird gelöscht, dieses Problem hat mich lange Zeit wirklich gestört, aber später habe ich es gelöst und es fühlte sich so großartig an!

Wie in der Darstellung oben gezeigt, ist das Dropdown-Menü in der Spalte „Into Warehouse“ ein Datagrid und sein Fachvokabular ist „Combogird“. Es ist nur so, dass die erste Auswahl dieses Dings in Ordnung ist, aber der zweite Klick löscht den Wert der ersten Auswahl. Dies ist auch das erste Mal, dass ich das OnClickRow-Ereignis von EasyUi nicht verstehe.

Lassen Sie mich zunächst meinen vorherigen Fehlercode vorstellen: 


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

Ihr seid bestimmt sehr besorgt darüber, was dieser row.Name ist? Was? Tatsächlich wusste ich es zunächst nicht, weil es ein Fehlercode war, der eilig zum Arzt ging und ihn zufällig schrieb. Down-Gitter namens Name, aber ich habe es verwechselt. Ja, diese Zeile bezieht sich auf die Zeile des Datagrids, auf die Sie geklickt haben, nicht auf die Zeile Ihrer Datenquelle. Ich habe auch weiterhin Js debuggt, um die Hinweise zu sehen. Als ich auf das Datagrid klickte, sprang der Code in das OnClickRow-Ereignis und es gab einen Code: „var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });“, und dann stellte ich fest, dass ed null war und Js eine Ausnahme auslöste, aber die Schnittstelle konnte es nicht sehen es, und die ausgewählten Daten wurden einfach weggewischt. Nachdem ich das Problem gefunden hatte, war ich mir immer noch nicht sicher. Nachdem ich den Code geändert hatte, führte ich ihn erneut aus und er wurde normal angezeigt, ohne den von mir ausgewählten Wert zu löschen.

Der korrekte Code lautet wie folgt: 


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

Hier ist die Datenquelle des Dropdown-Rasters 


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

Hast du es schon gelernt? Probieren Sie es einfach mal aus.

Verwandte Empfehlungen:

Detaillierte Erläuterung der DataGrid-Bindungs-Json-Datenquellenmethode von EasyUI

Lösung für das Senden von zwei Anfragen, nachdem die Datagrid-Komponentenseite von EasyUI geladen wurde

Inline-Bearbeitung des DataGrid von EasyUI

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von Datagrid in der EasyUi-Steuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung und Kompatibilität der Positionsmethode von jQueryNächster Artikel：Detaillierte Erläuterung der Verwendung und Kompatibilität der Positionsmethode von jQuery

In Verbindung stehende Artikel

Mehr sehen