一、简单示例

HTML

标题" idfield="ID" checkBox="true" url="@Url.Action("ListData")"> Box="true" width="30"> 名称

查询方法 $('#tbList').datagrid("unselectAll"); $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} }); });

二、基本用法

冻结列

Box:'true',width:30},{ field: 'BNo',title: '牌号',width: 100 },{ field: 'FNo',title: '班号',width: 100 } 　　]],　　　　　　　fitColumns:false　//禁止自适应宽度、可以水平滚动 });

复选框以及单选

Box="true" idfield="Id" url="@Url.Action("ListData")"> Box="true" width="150"> 　　　　　　

变为单选（添加singleSelect="true" ）

代码如下:

Box="true" idfield="Id" url="@Url.Action("ListData")">

加载数据后默认全选：

隐藏列

清空原有数据

方法1：

= 0; i--) { var index = $('#filegrid').datagrid('getRowIndex',item[i]); $('#filegrid').datagrid('deleteRow',index); } }

方法2：(测试过)

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

行点击事件

代码 } });

datagrip单击行的时候，将单选按钮设置为选中

dioFormatter = function (value,rec,index) { return ""; };

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

Box="true" idfield="Id" url="@Url.Action("ListData")"> dioFormatter">

table中td的时间格式问题

1.页面

2.js

};

table中td内容太长自动换行

添加属性　nowrap="false"

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

行和复选框的分离

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

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

eg.

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

方法二（1.3版本之前的解决方法）

设置数据列表的样式

显示为灰色字体 return 'color:#999;';//和一般的样式写法一样 } } }); });

条件查询

复选框的bug:使用参数查询时候，在查询之前选中的选项，在查询之后，使用getSelections方法去获取，依旧存在该选项

解决方案：通过unselectAll在查询之前清空复选框即可

查询bug:使用参数查询时候，在查询之后，显示的当前页码还是之前的，不会重置为1，还是之前页码；如果当前总页数为比当前小，导致页面显示为空。比如，当前第三页，加入时间查询后，只有1页数据，那么当前页码还是3，导致页面显示空白。

解决方案：设置pageNumber为 1

三、行数据的增删改

HTML（不分页列表）

代码如下:

          }
        });
        //将新插入的那一行开户编辑状态
        datagrid.datagrid("beginEdit",0);
        //给当前编辑的行赋值
        editRow = 0;
      }

    }
    },'-',{
     text: '删除',iconCls: 'icon-remove',handler: function () {
       //删除时先获取选择行
       var rows = datagrid.datagrid("getSelections");
       //选择要删除的行
       if (rows.length > 0) {
         $.messager.confirm("<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>","你确定要<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>吗?",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("请选择要<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>的信息！");
             }
           }
         });
       }
       else {
         $.messager.alert("<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>","请选择要<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>的行","error");
       }
     }
   },{
     text: '<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>',iconCls: 'icon-edit',handler: function () {
       //<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>时要<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>选择到的行
       var rows = datagrid.datagrid("getSelections");
       //如果只选择了一行则可以进行<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>，否则不操作
       if (rows.length == 1) {
         //<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>之前先<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>已经开启的编辑行，当<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>endEdit该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>时会触发onAfterEdit事件
         if (editRow != undefined) {
           datagrid.datagrid("endEdit",editRow);
         }
         //当无编辑行时
         if (editRow == undefined) {
           //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>到当前选择行的下标
           var index = datagrid.datagrid("getRowIndex",rows[0]);
           //开启编辑
           datagrid.datagrid("beginEdit",index);
           //把当前开启编辑的行赋值给<a href="/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>editRow
           editRow = index;
           //当开启了当前选择行的编辑状态之后，
           //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
           datagrid.datagrid("unselectAll");
         }
       }
     }
   },{
     text: '保存',handler: function () {
       //保存时结束当前编辑的行，<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>触发onAfterEdit事件如果要与<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>交互可将数据通过Ajax提交<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>
       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该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>触发此事件
    //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;
    }
  }
});

});

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

easyui easyui jquery