집 > 기사 > 웹 프론트엔드 > Easyui Datagrid 사용자 정의 버튼 열에 대한 자세한 설명

Easyui Datagrid 사용자 정의 버튼 열에 대한 자세한 설명

小云云원래의: 2018-01-01 10:36:302765검색

프로젝트 작업 시 요구 사항으로 인해 테이블 끝에 작업 열을 추가해야 하는데 EasyUI에서는 이 기능을 제공하지 않는 것 같습니다. 버튼 열을 사용자 정의하고 코드를 구현해 보겠습니다. .그것이 당신에게 도움이 되기를 바랍니다.

버전: jQuery easyUI 1.3.2

여기 구현 방법은 HTML 형식이고 js 메서드는 아직 사용되지 않았습니다.

먼저 HTML 부분입니다

<table id="dg" title="学生信息" class="easyui-datagrid" 
      url="${ctx}listStudent.do" 
      toolbar="#toolbar" pagination="true" 
      rownumbers="false" fitColumns="true" singleSelect="true"> 
    <thead> 
      <tr> 
        <th data-options="field:&#39;stuNo&#39;,sortable:true,width:20">学号</th> 
        <th data-options="field:&#39;name&#39;,width:20">姓名</th> 
        <th data-options="field:&#39;gender&#39;,width:20,formatter:formatGender">性别</th> 
        <th data-options="field:&#39;nationality&#39;,width:20">名族</th> 
        <th data-options="field:&#39;address&#39;,width:50,formatter:formatAddr">家庭地址</th> 
        <th data-options="field:&#39;mobile&#39;,width:20">手机号</th> 
        <th data-options="field:&#39;birthday&#39;,width:20">出生日期</th> 
        <th data-options="field:&#39;registDate&#39;,sortable:true,width:20">入学时间</th> 
        <th data-options="field:&#39;_operate&#39;,width:80,align:&#39;center&#39;,formatter:formatOper">操作</th> 
      </tr> 
    </thead> 
  </table> 
<th data-options="field:&#39;_operate&#39;,width:80,align:&#39;center&#39;,formatter:formatOper">操作</th>

빨간 부분에 주의하세요. 작업 열, 필드 이름은 아무렇게나 선택할 수 있습니다. 여기서는 _operate입니다. 핵심은 formatOper 함수입니다.

function formatOper(val,row,index){ 
  return &#39;<a href="#" rel="external nofollow" onclick="editUser(&#39;+index+&#39;)">修改</a>&#39;; 
}

formatOper() 함수에는 세 가지 매개 변수가 있으며, val은 현재 값을 나타냅니다. cell, row, 현재 행 객체, 현재 행의 인덱스를 지정합니다. 여기에 이 인덱스가 필요합니다

이 인덱스를 editUser라는 함수에 전달해야 하는 이유는 무엇입니까? function

function editUser(index){ 
  $(&#39;#dg&#39;).datagrid(&#39;selectRow&#39;,index);// 关键在这里 
  var row = $(&#39;#dg&#39;).datagrid(&#39;getSelected&#39;); 
  if (row){ 
    $(&#39;#dlg&#39;).dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;,&#39;修改学生信息&#39;); 
    $(&#39;#fm&#39;).form(&#39;load&#39;,row); 
    url = &#39;${ctx}updateStudent.do?id=&#39;+row.id; 
  } 
}

easyUI 문서를 보면 데이터그리드를 찾을 수 있습니다. selectRow

selectRow index Select a row, the row index start with 0.

라는 메소드가 있습니다. 이 기능은 테이블의 행을 수동으로 선택하는 것입니다. 매개변수는 인덱스 값입니다. 0

이렇게 하면 마우스로 클릭한 행에 해당하는 데이터를 실시간으로 얻을 수 있습니다

$(&#39;#dg&#39;).datagrid(&#39;selectRow&#39;,index);
var row = $(&#39;#dg&#39;).datagrid(&#39;getSelected&#39;);

이 두 문장은 선택한 행을 가져오는 것입니다

구체적인 효과는 다음과 같습니다. 그림

Easyui Datagrid 사용자 정의 버튼 열에 대한 자세한 설명

관련 기사