我要评论一、简单示例
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;
}
}
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论