一、datagrid表格序号
var num;
$('#datagrid').datagrid({
columns: [
[
{
field: 'myNo',
title: '序号',
align: 'center',
width: 100,
formatter: function (value, row, index) {
if (!num) {
num = $('#datagrid').datagrid('options');
}
return num.pageSize * (num.pageNumber - 1) + index + 1;
}
}
]
]
});
二、属性
1、url
请求远程数据的 URL。
2、data
当不使用url时，要加载的数据。
数据格式[{key:value},{key1:value1},...]
3、method
请求远程数据的方法（method）类型。
4、loadMsg
当从远程站点加载数据时显示的提示消息。
5、striped
奇偶行不同背景色。
三、刷新当前页面的表格数据
$('#datagrid').datagrid('reload');
四、datagrid中展示html标签
用于过滤源始数据的方法loadFilter
loadFilter: function (data) {
for (var i = 0; i < data.rows.length; i++) {
for (var att in data.rows[i]) {
if (typeof (data.rows[i][att]) == "string") {
data.rows[i][att] = data.rows[i][att].replace(/</g, "<").replace(/>/g, ">");
}
}
}
return data;
}
五、datagrid 列中a标签onclick事件
formatter:function(value,rowData,rowIndex){
return '<a href="javascript:void(0);" onclick="_editDraftXf(\'' + rowData.xfId + '\');return false;"> '+rowData.title+' </a> '
}
_editDraftXf = function(xfId) {
AppService.openStartProcess({
data:{
configCode:'xfgl',//配置ID
bizId:xfId,
openType:'iframe'
}
});
};
阻止a标签的跳转；
return false;
onclick="_editDraftXf(\'' + rowData.xfId + '\');return false;"
六、datagrid假分页
// 表格数据请求
var getDbTable = function(){
$.ajax({
url: getSwController() + "/querysws",
type: "GET",
contentType: "application/json",
data: {
title: $("#title").val(),
acceptUserName: $("#acceptUserName").val(),
fwDeptName: $("#fwDeptName").val(),
fwCode: $("#fwCode").val(),
startSwTime: $("#startSwTime").val(),
endSwTime: $("#endSwTime").val(),
page: 1,
rows: 80
},
async: false,
success: function (data) {
var indexNum;
$("#dbTable").datagrid({
fitColumns: true,
autoRowHeight: false,
nowrap: false,
checkOnSelect: false,
data: data,
pagination: true,
pageSize: 5,
pageList: [5, 10, 15],
loadFilter: partPurchasePagerFilter,
columns: [[
{field: 'ck', checkbox: true},
{
field: 'number',
title: '序号',
align: 'center',
width: '3%',
formatter: function (value, row, index) {
if (!indexNum) {
indexNum = $('#dbTable').datagrid('options');
}
return indexNum.pageSize * (indexNum.pageNumber - 1) + index + 1;
}
},
{
field: 'title',
title: '局领导',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<select id="" name="" class=""></select>';
}
},
{
field: 'statusName',
title: '批示内容',
width: '15%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="20">' + value + '</textarea>';
}
},
{
field: 'fwDeptName',
title: '承办部门',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="14">' + value + '</textarea>';
}
},
{
field: 'fwCode',
title: '责任领导',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="14">' + value + '</textarea>';
}
},
{
field: 'acceptUserName',
title: '承办人',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="14">' + value + '</textarea>';
}
},
{
field: 'swTime',
title: '完成阶段',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="14">' + value + '</textarea>';
}
},
{
field: 'bizTypeName',
title: '具体办理情况',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="14">' + value + '</textarea>';
}
},
{
field: 'curActName',
title: '相关附件',
width: '10%',
align: 'center',
formatter: function (value, rowData, rowIndex) {
return '<textarea id="" name="" rows="5" cols="14">' + value + '</textarea>';
},
editor: 'textarea'
}
]]
});
}
});
};
// 分页方法
function partPurchasePagerFilter(data) {
if(typeof data.length == 'number' && typeof data.splice == 'function') {
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
//返回属性对象
var opts = dg.datagrid('options');
//返回页面对象
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function(pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if(!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
getDbTable();
七、datagrid onBeforeRender
在onLoadSuccess时已经对页面渲染完毕，此时则无法对数据再进行修改
$('#fwGrid').datagrid("options").view.onBeforeRender = function (target, rows) {
$.each(rows, function (index, row) {
});
};
$('#fwGrid').datagrid("options").view.onAfterRender = function (target, rows) {
$.each(rows, function (index, row) {
});
};
八、datagrid选中复选框选中的数据
var selectRows = $("#dbTable").datagrid("getChecked");//checkBox
var selectRows = $("#dbTable").datagrid("getSelections");//有时会选中所有数据
