效果显示:
同上次博文效果。
html代码:
同上次博文代码。
js代码:
- align: ‘center’,//标题和内容居中
- resizable: false,//不允许改变大小
- //hidden:true,//隐藏该列
- fitColumns: false,//是否自适应宽度(出现滚动条)
- loadMsg: ‘正在努力加载,请稍后………………’,//显示加载提示信息
- rownumbers: true,//显示行号
- //showHeader: false,//是否显示行头(标题)
- //showFooter:false,//显示行尾,默认情况下不显示,要在后台使用json数据传递
$(function () {
$('#tab').datagrid({ //===================================== 样式 ===============================================//
width: ,//宽度
title: '信息列表',//标题名
iconCls: 'icon-search',//图标
singleSelect: true,//是否单选
striped: true,//是否开启斑马线
fitColumns: false,//是否自适应宽度(出现滚动条)
loadMsg: '正在努力加载,请稍后………………',//显示加载提示信息
rownumbers: true,//显示行号
//showHeader: false,//是否显示行头(标题)
//showFooter:false,//显示行尾,默认情况下不显示,要在后台使用json数据传递
//==========================================================================================// //============================= 加载数据,要显示的字段 =========================================//
//要加载的数据
url: "../Json/datagridjson.ashx",
//要显示的列
columns: [[
{
field: 'id',
title: '编号',
align: 'center',//标题和内容居中
resizable: false,//不允许改变大小
//hidden:true,//隐藏该列
},
{
field: 'name',
title: '姓名',
halign: 'center',//仅标题居中 //显示数据的时候,格式化数据
formatter: function (value, row, index) {
return '[ ' + value + ' ]';
},
},
{
field: 'sex',
title: '性别'
},
//在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
{
field: 'createtime',
title: '创建时间',
sortable: true,//允许排序
}
]],
//==========================================================================================// //===================================== 分页 ===============================================//
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//,每页显示的条数
pageList: [, , ],//每页显示的条数
//==========================================================================================// //===================================== 排序 ===============================================//
//通过POST传递到后台,然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//==========================================================================================// });
})