jquery easyui DataGrid简单示例

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

$('#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>

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

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

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

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

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

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

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

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

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

checkOnSelect="false" selectOnCheck="false"

var selected = $("#tbList").datagrid("getSelections");    if (selected.length == 0) {      alert("请选择！");      return;    }    var idString = "";    $.each(selected, function (index, item) {      idString += item.Id + ",";    });

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;';//和一般的样式写法一样          }        }      });  });

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

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

$(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;        }      }    });  });