*html页面设计
<table id="list_data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th field="Name" width="100">部门</th>
<th field="Passwd" width="100">网站</th>
<th field="ConfigName" width="100">名称</th>
<th field="Data" width="100">管理员</th>
<th field="age" width="100">注释</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$('#list_data').datagrid({
title: '应用系统列表',
iconCls: 'icon-edit',//图标
width: 'auto',
height: 'auto',
nowrap: false,//如果为true,则在同一行中显示数据。设置为true可以提高加载性能。
striped: true,//是否显示斑马线效果。
border: true,
collapsible: false,//是否可折叠的
fit: true,//自动大小
url: '/test/getRes',//异步访问的页面
//sortName: 'code',
//sortOrder: 'desc',
remoteSort: false,//定义从服务器对数据进行排序。
idField: 'fldId',//指明哪一个字段是标识字段。
singleSelect: false,//是否单选
pagination: true,//分页控件
rownumbers: true,//行号
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],//同列属性,但是这些列将会被冻结在左侧。
//图标添加
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
openDialog("add_dialog", "add");
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function () {
alert('修改');
//openDialog("add_dialog", "edit");
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function () {
delAppInfo();
}
}]
});
//设置分页控件
var p = $('#list_data').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
</script>
*cs代码设计
//model
public class User
{
public string Name { get; set; }
public string Passwd { get; set; }
public string ConfigName { get; set; }
public string Data { get; set; }
public string age { get; set; }
}
//controllor
public ActionResult getRes()
{
List<User> list = new List<User>();
User u = new Models.User();
for (int i = 0; i < 20; i++)
{
u.age = (i * 1.5).ToString();
u.Data = "asdsa";
u.ConfigName = "sadsa";
u.Name = "小王";
u.Passwd = i.ToString();
list.Add(u);
}
return Json(list, JsonRequestBehavior.AllowGet);
}
<table id="list_data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th field="Name" width="100">部门</th>
<th field="Passwd" width="100">网站</th>
<th field="ConfigName" width="100">名称</th>
<th field="Data" width="100">管理员</th>
<th field="age" width="100">注释</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$('#list_data').datagrid({
title: '应用系统列表',
iconCls: 'icon-edit',//图标
width: 'auto',
height: 'auto',
nowrap: false,//如果为true,则在同一行中显示数据。设置为true可以提高加载性能。
striped: true,//是否显示斑马线效果。
border: true,
collapsible: false,//是否可折叠的
fit: true,//自动大小
url: '/test/getRes',//异步访问的页面
//sortName: 'code',
//sortOrder: 'desc',
remoteSort: false,//定义从服务器对数据进行排序。
idField: 'fldId',//指明哪一个字段是标识字段。
singleSelect: false,//是否单选
pagination: true,//分页控件
rownumbers: true,//行号
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],//同列属性,但是这些列将会被冻结在左侧。
//图标添加
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
openDialog("add_dialog", "add");
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function () {
alert('修改');
//openDialog("add_dialog", "edit");
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function () {
delAppInfo();
}
}]
});
//设置分页控件
var p = $('#list_data').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
</script>
*cs代码设计
//model
public class User
{
public string Name { get; set; }
public string Passwd { get; set; }
public string ConfigName { get; set; }
public string Data { get; set; }
public string age { get; set; }
}
//controllor
public ActionResult getRes()
{
List<User> list = new List<User>();
User u = new Models.User();
for (int i = 0; i < 20; i++)
{
u.age = (i * 1.5).ToString();
u.Data = "asdsa";
u.ConfigName = "sadsa";
u.Name = "小王";
u.Passwd = i.ToString();
list.Add(u);
}
return Json(list, JsonRequestBehavior.AllowGet);
}