찾다

집 >웹 프론트엔드 >JS 튜토리얼 >EasyUi 컨트롤의 Datagrid에 대한 자세한 설명

EasyUi 컨트롤의 Datagrid에 대한 자세한 설명

小云云
小云云원래의
2017-12-30 14:13:3224750검색

최근에 타사 컨트롤(EasyUi)을 사용해야 하는 웹 프로젝트가 있습니다. 결국 타사 컨트롤을 사용하여 생성된 효과가 원본보다 약간 더 좋습니다. 데이터 목록에서 직접 편집. 데이터 저장을 전문 용어로 인라인 편집이라고 합니다. 이 글은 EasyUi 컨트롤에 있는 Datagrid 관련 정보를 중심으로 자세히 소개하고 있으니, 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

EasyUi 컨트롤의 Datagrid에 대한 자세한 설명

인라인 편집에 대해 이야기하기 전에 먼저 EasyUi를 사용하여 DataGrid를 만드는 방법을 이해해야 합니다(1.easyui.js 또는 직접 HTML 코드와 easyui 스타일). 저는 JS 메소드를 사용합니다. ：

1. Js를 사용하여 DataGrid를 만듭니다

위는 렌더링입니다.

Html 코드는 다음과 같습니다. 페이지에 테이블을 정의합니다


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

Js 코드는 다음과 같습니다.

몇 개가 있나요? 제가 더 중요하다고 생각하는 속성은 이 태그 아래에 있습니다.

url: 이는 데이터 그리드가 데이터 세트를 가져오는 주소, 즉 Action입니다. 작업이 Json 형식으로 데이터를 반환해야 한다는 점에 유의하세요.

pagination: 데이터 그리드가 페이지 매김에 표시되는지 여부를 설정합니다.

queryParams: 쿼리 조건 매개변수

formatter: 형식화, 날짜 열에 사용됩니다. EasyUi의 데이터그리드가 형식화 없이 날짜를 표시하는 경우 날짜가 무작위로 표시됩니다. 속성은 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 속성에는 편집 유형(다양한 컨트롤 유형을 지원합니다. 공식 웹사이트에서 확인 가능)이 있습니다. 제어.

예를 들어 위 그림의 "창고 상태"에서는 먼저 데이터 소스를 정의하고 json 형식이 중점입니다. 

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

그러면 형식 변환 기능이 필요합니다. 그렇지 않으면 선택 시 텍스트 값이 아닌 값만 표시됩니다. 코드는 다음과 같습니다. 

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: 앞서 정의한 변환 형식 함수를 사용합니다.

옵션: 의 데이터는 우리가 정의한 데이터 소스입니다.

valueField: 선택 후의 값, 자세히 설명할 필요가 없습니다.

textField: 선택 후 표시되는 값, 텍스트 값입니다.

type: 콤보박스, 드롭다운 옵션의 스타일입니다. 

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

셋째, 하이라이트도 제가 겪은 문제입니다. 설명: 데이터그리드에 드롭다운 데이터그리드 컨트롤을 추가했습니다. 처음 선택했을 때 데이터그리드 행을 클릭하면 선택한 드롭다운 데이터그리드 컨트롤의 값이 지워졌습니다. 그 문제는 오랫동안 저를 정말 괴롭혔어요. 하지만 나중에 처리하고 나니 기분이 너무 좋았어요!

위 렌더링에서 볼 수 있듯이 "Into Warehouse" 열에서 드롭다운은 데이터 그리드이고 해당 전문 용어는 "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);
        }
      }
    }

여러분은 이 행이 무엇인지 매우 걱정하고 계실 것입니다. 이름은 무엇입니까? 무엇? 사실 처음에는 몰랐는데, 오류코드라서 급하게 병원에 가서 임의로 적어봤습니다. ㅎㅎ 제 드랍에 란이 있어서 임의로 쓴 건 아니고- Name이라는 그리드를 아래로 내리는데 혼동스럽습니다. 예, 이 행은 데이터 소스의 행이 아니라 클릭한 데이터 그리드의 행을 나타냅니다. 또한 단서를 보기 위해 J를 계속 디버깅했습니다. DataGrid를 클릭했을 때 코드가 OnClickRow 이벤트로 점프했고 "

;"이라는 코드가 있었습니다. 그런 다음 ed가 null이고 Js가 예외를 던졌지만 인터페이스는 이를 볼 수 없다는 것을 알았습니다. 선택한 데이터가 삭제되었습니다. 문제를 발견한 후에도 여전히 확신이 서지 않아 코드를 수정한 후 다시 실행해보니 선택한 값이 지워지지 않고 정상적으로 표시되었습니다.

var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' })올바른 코드는 다음과 같습니다. 

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

드롭다운 그리드의 데이터 소스는 다음과 같습니다

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으로 문의하세요.
이전 기사：jQuery의 Position 메소드 사용 및 호환성에 대한 자세한 설명다음 기사：jQuery의 Position 메소드 사용 및 호환성에 대한 자세한 설명

관련 기사

더보기