ホームページ  >  記事  >  ウェブフロントエンド  >  Easyui Datagridカスタムボタン列の詳細説明

Easyui Datagridカスタムボタン列の詳細説明

小云云
小云云オリジナル
2018-01-01 10:36:302744ブラウズ

プロジェクトで作業する場合、要件によりテーブルの最後に操作列を追加する必要があります。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() 関数には 3 つのパラメーターがあり、val は現在のセルの値を参照します、row、現在の行オブジェクト、現在の行のインデックス。ここでこのインデックスが必要です

このインデックスを editUser という関数に渡しました。なぜこの editUser 関数を見てみましょう。


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 のドキュメントを見ると、datagrid が見つかります。 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;);

この2つの文は選択された行を取得するものです

具体的な効果は図の通りです関連する推奨事項:exeeduiのdatagrid datagagridの操作ボタンを追加するeasyuiのdatagridの詳細な説明Datagrid

detailidの詳細な説明


以上がEasyui Datagridカスタムボタン列の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。