newsList.html:
<script type="text/javascript">
$(function () {
initTable();
$("#editDiv").css("display", "none");
});
function initTable() {
$('#tt').datagrid({
url: 'LoadPageNew.ashx', //表格初始化后 自动异步从后台url地址获取数据,rows:pageSize,page:pageIndex 要求后台返回的数据:json:{total:30,rows:[{},{}]}
title: '演示表格使用',
width: 700,
height: 400,
fitColumns: true, //自适应列
idField: 'ID', //主键列,后台传来的主键,大小写必须一样
loadMsg: '正在加载新闻的信息...',
pagination: true, //允许分页
singleSelect: false, //单行选中
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
queryParams: {}, //往后台传参数
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'ID', title: '主键', width: 80 },
{ field: 'title', title: '新闻标题', width: 120 },
{ field: 'Date', title: '提交日期', width: 120 },
{ field: 'people', title: '新闻发布人', width: 120 },
{ field: 'type', title: '新闻 类型', width: 80, align: 'right',
formatter: function (value, row, index) {
return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
}
},
{ field: 'picUrl', title: '图片', width: 80, align: 'right',
styler: function (value, row, index) {
if (value.length > 0) {
return 'background-color:#ffee00;color:red;';
}
},
formatter: function (value, row, index) {
// return "<a href='#' οnclick='editGoodsPrice(" + row.goodsid + ");return false;'>" + value + "</a>";
return "<img src='" + value + "'/>";
}
}
]],
toolbar: [{
id: 'btnDownShelf',
text: '添加',
iconCls: 'icon-add',
handler: function () {
//重新加载表格,第一个方法名,后面放参数
$("#tt").datagrid("reload");
}
},{
id: 'btnEdit',
text: '修改',
iconCls: 'icon-edit',
handler: editClick
}, {
id: 'btnRemove',
text: '删除',
iconCls: 'icon-cancel',
handler: deleteClick
}],
onHeaderContextMenu: function (e, field) {
}
});
}
//删除
function deleteClick() {
var selectRows = $("tt").datagrid("getSelections");
if (selectRows.length < 1) {
$.messager.alert("提示消息", "请选中后删除");
return;
}
var strIds = "";
for (var key in selectRows) {
strIds += selectRows[key].ID + ",";
}
strIds += strIds(0, strIds.lastIndexOf(','));
//发送异步请求删除后台数据
//清除选中
$("#tt").datagrid("clearSelections");
}
//点击了修改按钮之后
function editClick() {
//看用户是否掷选中了一行
//拿到选中行的json的对象的集合
var selectRows = $("tt").datagrid("getSelections");
if (selectRows.length != 1) {
$.messager.alert("提示消息", "会修改吗");
return;
}
//给iframe标签赋值
$("frmEdit").attr("src", "../AjaxCRLID/ShowEdit.aspx?id=" + selectRows[0].ID);
$("#editDiv").css("display", "block");
$("#editDiv").dialog({
title: "修改。。。。",
model: true,
width: 300,
height: 300,
collapsible: true,
minimizable: true,
maxmizable: true,
resizable: true,
button: [{
text: "修改",
id: 'btnOK',
iconCls: 'icon-add',
handler: function () {
//出发子页面的表单的提交
$("#frmEdit")[0].contentWindow.subFrm();
}
}, {
text: "关闭",
id: 'btnClose',
iconCls: 'icon-cancel', //图标
handler: function () {//按钮被点击时 执行此方法
alert("取消被点击了");
}
}]
});
}
function afterEditSuccess() {
$("#editDiv").dialog("close");
$("#tt").datagrid("reload");
}
</script>
<body>
<div>
<table id="tt" style="width: 700px;" title="标题,可以使用代码进行初始化,也可以使用这种属性的方式" iconcls="icon-edit">
</table>
</div>
<!------------------修改的对话框开始--------------------------->
<div id="editDiv">
<h3>修改的对话框</h3>
<iframe id="frmEdit" frameborder="0" width="100%" src="javascript:void(0)">
</iframe>
</div>
<!------------------修改的对话框结束--------------------------->
</body>
LoadNewsPage.ashx:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageSize = int.Parse(context.Request["rows"]??"10");
int pageIndex = int.Parse(context.Request["pages"]??"1");
int total = 0;
//输出json格式数据:{total:40,rows:[]}
//往后台发送数据
BLL.HKSJ_Main mainServer = new BLL.HKSJ_Main();
List<Model.HKSJ_Main> mainList = mainServer.LoadPageMainByProc(pageSize,pageIndex,out total);
string strPageNav = Common.LaomaPager.ShowPageNavigate(pageSize,pageIndex,total);
System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var data = new { total=total,rows=mainList};
context.Response.Write(javaScriptSerializer.Serialize(data));
}