jquery easyui 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的高度，而且不能为auto

复选框以及单选

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

变为单选（添加singleSelect=”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');
      }
    });

获取行数