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

获取行数

$('#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: [] });