一、简单示例

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: [] });

解析：loadData：载入本地数据，旧记录将被移除。

行点击事件

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

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

};

table中td内容太长自动换行

添加属性　nowrap="false"

将nowrap: false这个属性设置在table的属性中，不要设置在字段的属性中，字段可以设置宽度，这样就可以做到当文字长度超过规定的宽度后自动换行了

行和复选框的分离

方法一：（1.3版本才能用）

checkOnSelect="false" selectOnCheck="false"

注意：当使用$("#tbList").datagrid("getSelections");时候，只有行被选中，才能取到该行。一般情况，选中行时候，行为黄色背景。

eg.<table checkOnSelect="false"> </table> 

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:使用参数查询时候，在查询之前选中的选项 ，在查询之后，使用getSelections方法去获取，依旧存在该选项

解决方案：通过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;
        }
      }
    });
  });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jquery  # easyui  # DataGrid  # 基于datagrid框架的查询  # jQuery easyui datagrid动态查询数据实例讲解  # Jquery EasyUI Datagrid右键菜单实现方法  # jquery easyui dataGrid动态改变排序字段名的方法  # jQuery Easyui学习之datagrid 动态添加、移除editor  # jQuery EasyUI之DataGrid使用实例详解  # Jquery之datagrid查询详解  # 单选  # 复选框  # 请选择  # 这是  # 分页  # 双击  # 设置为  # 单击  # 清空  # 换行  # 行数  # 加入时间  # 如果没有  # 将被  # 可将  # 能为  # 则可  # 则在  # 转换成  # 时要 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Laravel怎么为数据库表字段添加索引以优化查询  音乐网站服务器如何优化API响应速度？  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？  EditPlus中的正则表达式 实战(4)  Laravel如何与Pusher实现实时通信？（WebSocket示例）  Swift中swift中的switch 语句  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  网站页面设计需要考虑到这些问题  如何用IIS7快速搭建并优化网站站点？  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  如何在橙子建站上传落地页？操作指南详解  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  在线教育网站制作平台,山西立德教育官网？  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  如何在阿里云高效完成企业建站全流程？  如何在宝塔面板中创建新站点？  JavaScript Ajax实现异步通信  简历没回改：利用AI润色让你的文字更专业  想要更高端的建设网站，这些原则一定要坚持！  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  ,网页ppt怎么弄成自己的ppt？  教学论文网站制作软件有哪些,写论文用什么软件 ？  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Laravel如何处理异常和错误？（Handler示例）  C#如何调用原生C++ COM对象详解  Laravel如何配置任务调度？（Cron Job示例）  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Laravel安装步骤详细教程_Laravel环境搭建指南  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  在centOS 7安装mysql 5.7的详细教程  中山网站推广排名,中山信息港登录入口？  详解Android图表 MPAndroidChart折线图  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  移动端脚本框架Hammer.js  如何获取免费开源的自助建站系统源码？  电商网站制作价格怎么算,网上拍卖流程以及规则？  如何在七牛云存储上搭建网站并设置自定义域名？  如何在宝塔面板中修改默认建站目录？