-
这是datagrid的一个例子,里面包含了datagrid的各种方法, 包含排序字段、分页、onClickRow 、 onLoadSuccess 、
onDblClickCell //双击列事件 、formatter //调用方法,得到返回值columns //这是在表头上显示功能按钮
function listSP() {
var height = $("#specialcensus_div").height();
// 设置列表高度
var width = $("#specialcensus_div").width();
$("#clockInList").datagrid({
url : url,
width : '100%',
height : '100%',
method : "POST",
dataType : 'json',
sortName : "clockId",
sortOrder : "desc",
queryParams : {
"query" : query
},
autoRowHeight : false,
singleSelect : false,
pagination : true,
nowrap : true,
striped : true,
pageSize : 15,
pageNumber : 1,
pageList : [ 15, 25, 40, 100 ],
showFooter : true,
remoteSort : true,
fitColumns : false,
onClickRow :function(rowIndex, rowData){
markOneReload(rowData);
$('.peoLengend').css('display',"block");
},
onLoadSuccess : function(data) {
isFirst = datagrid_page(isFirst, data, {
page_id : 'aj_page_box',
Id : 'clockInList',
})
},
//点击列
onDblClickCell: details,
loadMsg : "数据正在加载...",
columns : [ [{title : '多选框', field: 'ck', checkbox: true }, {
title : '网格员编号',
field : 'supId',
width : 80,
sortable : true,
align : 'center',
hidden : true
}, {
title : '姓名',
field : 'staffName',
width : 100,
sortable : true,
align : 'left',
hidden : false,
formatter : name
} ] ],
toolbar : [ {//设置表头的按钮
text : '查询',
iconCls : 'icon-search',
handler : search
} ]
});
// 设置关闭按钮位置
setCloss();
}
/**
* 点击列触发事件
* @param rowIndex
* @param field
* @param value
*/
function details(rowIndex, field, value) {
var rows = $('#clockInList').datagrid('getRows');
var row = rows[rowIndex];
var staffUsername = row.wfdStaff.staffUsername;
if(field=="reported"){//列名是今日采集数
reportedDetails(staffUsername);
}else if(field=="finish"){//列名是今日完成数
finishDetails(staffUsername);
}
}
/**
* 设置用户名
*
* @param value
* @param row
* @param index
* @returns
*/
function formatter_staffUsername(value, row, index) {
if (row.wfdStaff.staffUsername) {
return row.wfdStaff.staffUsername;
}
return "";
}