jquery easuyui DataGridの簡単な例

一、簡単な例
HTML

<table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="  "
    idfield="ID" checkbox="true" url="@Url.Action("ListData")">
  <thead>
    <tr>
      <th field="ID" checkbox="true" width="30">
      </th>
      <th field="Name" width="200" align="center">
          
      </th> 
    </tr>
  </thead>
</table>

JS

$('#tbList').datagrid({ pagination: true });
$("#btnSearch").click(function () {//    
  $('#tbList').datagrid("unselectAll");
  $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} });
});

二、基本的な使い方
列を凍結する

$('#tbList').datagrid({ pagination: true,
      frozenColumns: [[
      { field: 'BId',checkbox:'true',width:30},
      { field: 'BNo', title: '  ', width: 100 },
      { field: 'FNo', title: '  ', width: 100 }
    　　]], 
　　　　　　　fitColumns:false　//       、      
    });

改ページを取る

$('#tbList').datagrid({pagination: true});

に変更

$('#tbList').datagrid();

または

$('#tbList').datagrid({pagination: false});

注意：テーブルの高さを設定する必要があります。
チェックボックスと単一選択

<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" 
checkbox="true" idfield="Id" url="@Url.Action("ListData")">
<thead>
    <tr>
   　　<th field="Id" checkbox="true" width="150">
    　　</th>
　　　　</tr>
</thead>
</table>

シングルにします。(single Select="true"を追加します。  ）

<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true"  idfield="Id" url="@Url.Action("ListData")">

データを読み込み後のデフォルトの全選択:

 $(document).ready(function () {
    $('#tbList').datagrid({ 
      onLoadSuccess: function (data) {
        $('#tbList').datagrid('selectAll');
      } 
    });

行数を取得

$('#tbList').datagrid("getRows").length;

列を隠す

<th field="Dept" width="100" hidden="true">  </th>

既存のデータを空にする
方法1:

 var item = $('#filegrid').datagrid('getRows');
      if (item) {
        for (var i = item.length - 1; i >= 0; i--) {
          var index = $('#filegrid').datagrid('getRowIndex', item[i]);
          $('#filegrid').datagrid('deleteRow', index);
        }
      }

方法2:(テストしました)

$('#filegrid').datagrid('loadData', { total: 0, rows: [] });

解析：ローカルデータをロードし、古いレコードを削除します。
イベントをクリックします

 $('#tbList').datagrid({ onClickRow: function () {//   } });

datagripが行をクリックすると、ラジオボタンを選択します。

<script type="text/javascript">
  var List = {};
  List.RadioFormatter = function (value, rec, index) {
    return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
  };

　$(document).ready(　function(){ //      
　　$('#tbList').datagrid({ onClickRow:
      function () {
        //      ，          
        var id = $('#tbList').datagrid("getSelected");
        $("input[name='name']").each(function () {
          if ($(this).val() == id.Id) {
            $(this).attr("checked", true);
          }
        });
      }
    });
});
</script>
<table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
     singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
      <thead>
        <tr>
          <th field="Id" width="30" formatter="PickupList.RadioFormatter">
          </th>
        </tr>
      </thead>
    </table>

 テーブルのtdの時間書式の問題
1.ページ

 <th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

2.js 

var Common = {
  //EasyUI DataGrid      
  TimeFormatter: function (value, rec, index) {
    if (value == undefined) {
      return "";
    }
    /*json     js    */
    value = value.substr(1, value.length - 2);
    var obj = eval('(' + "{Date: new " + value + "}" + ')');
    var dateValue = obj["Date"];
    if (dateValue.getFullYear() < 1900) {
      return "";
    }
    var val = dateValue.format("yyyy-mm-dd HH:MM");//    
    return val.substr(11, 5);
  }

};

テーブルの中のtdの内容は長すぎて、自動的に改行します。
属性nowrap=「false」を追加します。
nowrap:falseという属性をテーブルの属性に設定します。フィールドの属性には設定しないでください。フィールドは幅を設定できます。これにより、テキストの長さが所定の幅を超えたら自動的に改行することができます。
行とチェックボックスの分離
方法1：（1.3バージョンのみ使用可能）

checkOnSelect="false" selectOnCheck="false"

注意：ドル（「膎tbList」）・datagrid（「get Selections」）を使用する場合；を選択すると、行だけが選択されます。行を選択すると黄色の背景が表示されます。
eg. 

var selected = $("#tbList").datagrid("getSelections");
    if (selected.length == 0) {
      alert("   ！");
      return;
    }

    var idString = "";
    $.each(selected, function (index, item) {
      idString += item.Id + ",";
    });

方法二（1.3バージョン前の解決方法） 

var IsCheckFlag = true;
    $('#tbList').datagrid({
      pagination: true,
      onClickCell: function (rowIndex, field, value) {
        IsCheckFlag = false;
      },
      onSelect: function (rowIndex, rowData) {
        if (!IsCheckFlag) {
          IsCheckFlag = true;
          $("#tbList").datagrid("unselectRow", rowIndex);
        }
      },
      onUnselect: function (rowIndex, rowData) {
        if (!IsCheckFlag) {
          IsCheckFlag = true;
          $("#tbList").datagrid("selectRow", rowIndex);
        }
      }
    });

データリストのスタイルを設定します。

 $(document).ready(function () {
    //      
    $('#tbList').datagrid({ pagination: true,
      rowStyler: function(index,row){
          if (row.ID< 10) {//     id    10 ，        
            return 'color:#999;';//          
          }
        }
      });
  });

条件クエリー
チェックボックスのbug:パラメータクエリーを使用する場合は、クエリーの前に選択したオプションが、クエリーの後に、get Selections方法を使用して取得されても、このオプションがあります。
解決策：unselectAllにより照会前にチェックボックスをクリアすればいいです。

$("#btnSearch").click(function () {
      $('#tbList').datagrid("unselectAll");
      $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val() } });
    });

クエリーのbug:パラメータを使ってクエリーを行う場合、クエリーの後に表示される現在のページ番号はまだ前のもので、1にリセットされませんか？それとも前のページ番号ですか？現在の総ページ数が現在より小さい場合、ページは空になります。例えば、現在の第三ページは、時間クエリーに参加した後、1ページのデータしかないです。現在のページ番号はまだ3です。ページが空白となっています。
ソリューション：PageNumberを1に設定します。

$("#btnSearch").click(function () {
      $('#tbList').datagrid("unselectAll");
      $('#tbList').datagrid({ pageNumber: 1,queryParams: { SearchName: $("#SearchName").val() } });
    });

 三、行データの添削
HTML(改ページリストなし)

<table id="tbProductList" style="height: 500px; max-height: 500px;" fix="true" fitcolumns="true" idfield="ID" url="@Url.Action("ListData")"></table>

JS

$(document).ready(function () { 
    var datagrid;
    var editRow = undefined;
    datagrid = $("#tbList").datagrid({
      border: true,
      checkbox: true,
      iconCls: 'icon-save', //  
      nowap: true, //            
      pagination: false,
      rownumbers: true,
      striped: true, //     
      columns: [[//    
       { field: 'ID', title: '  ', width: 100, align: 'center', sortable: true, checkbox: true },
       { field: 'Name', title: '  ', width: 100, sortable: true },
       {
         field: 'PriceType', title: '  ', width: 100, align: 'center',
         formatter: function (value, row) { return row.TypeName; },
         editor: {
           type: 'combobox', options: {
             valueField: 'Value',
             textField: 'Text',
             method: 'get',
             url: $("#TypeUrl").val(),
             required: true
           }
         }
       },
        {
          field: 'Price', title: '  ', width: 100, align: 'center',
          editor: {
            type: 'numberbox', options: {
              required: true,
              min: 0,
              precision: 2
            }
          }
        },
        {
          field: 'Count', title: '  ', width: 100, align: 'center',
          editor: {
            type: 'numberbox', options: {
              required: true,
              min: 0,
              precision: 0
            }
          }
        }
      ]],
      queryParams: { action: 'query' }, //    
      toolbar: [{ text: '  ', iconCls: 'icon-add', handler: function () {//           ，  ，   
          //               ，                
          if (editRow != undefined) {
            datagrid.datagrid("endEdit", editRow);
          }
          //             ，  datagrid        
          if (editRow == undefined) {
            datagrid.datagrid("insertRow", {
              index: 0, // index start with 0
              row: {

              }
            });
            //              
            datagrid.datagrid("beginEdit", 0);
            //         
            editRow = 0;
          }

        }
        }, '-',
       {
         text: '  ', iconCls: 'icon-remove', handler: function () {
           //         
           var rows = datagrid.datagrid("getSelections");
           //       
           if (rows.length > 0) {
             $.messager.confirm("  ", "       ?", function (r) {
               if (r) {
                 var ids = [];
                 for (var i = 0; i < rows.length; i++) {
                   ids.push(rows[i].ID);
                 } 
                 //            ,        
                 if ($.trim(ids) != "") {
                  //---- Delete(ids.join(','));//  post
                 } else {
                   alert("         ！");
                 }
               }
             });
           }
           else {
             $.messager.alert("  ", "        ", "error");
           }
         }
       }, '-',
       {
         text: '  ', iconCls: 'icon-edit', handler: function () {
           //           
           var rows = datagrid.datagrid("getSelections");
           //               ，     
           if (rows.length == 1) {
             //               ，   endEdit       onAfterEdit  
             if (editRow != undefined) {
               datagrid.datagrid("endEdit", editRow);
             }
             //      
             if (editRow == undefined) {
               //           
               var index = datagrid.datagrid("getRowIndex", rows[0]);
               //    
               datagrid.datagrid("beginEdit", index);
               //                editRow
               editRow = index;
               //                ，
               //              ，                   
               datagrid.datagrid("unselectAll");
             }
           }
         }
       }, '-',
       {
         text: '  ', iconCls: 'icon-save', handler: function () {
           //           ，    onAfterEdit                Ajax    
           datagrid.datagrid("endEdit", editRow);
         }
       }, '-',
       {
         text: '    ', iconCls: 'icon-redo', handler: function () {
           //              undefined       ,      
           editRow = undefined;
           datagrid.datagrid("rejectChanges");
           datagrid.datagrid("unselectAll");
         }
       }, '-'],
      onAfterEdit: function (rowIndex, rowData, changes) {
        //endEdit        
        //console.info(rowData);
        //---- Update(ids.join(','));//  post
        editRow = undefined;
      },
      onDblClickRow: function (rowIndex, rowData) {
        //       
        if (editRow != undefined) {
          datagrid.datagrid("endEdit", editRow);
        }
        if (editRow == undefined) {
          datagrid.datagrid("beginEdit", rowIndex);
          editRow = rowIndex;
        }
      }
    });
  });

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。