目的:
明确目的,如标题所示,我们要使用EasyUI中的datagrid控件进行数据的绑定。和点击某一行的单元格跳转到想要的其他界面。直接上代码
前端代码:
<script>
$(document).ready(function () {
var para = "<%=Session["UserName"]%>";
$('#dg').datagrid({
title: '标题设置',
iconCls: 'icon-save',
url: '../SystemSet/SS_ApproveList.ashx?AppName=' + para,
dataType: 'json',
width: "100%",
striped: true,
pagination: true,
pageSize: 20,
columns: [[ //每页具体内容
{ field: 'appr_nbr', title: '单号', width: 160, formatter: rowformater, onClickRow: delHsCode, sortable: true, align: 'center' },
{ field: 'appr_type', title: '类型', width: 120, align: 'center' },
{ field: 'appr_user', title: '审批人', width: 120, align: 'center' },
{ field: 'form_application', title: '申请人', width: 120, align: 'center' },
{ field: 'le_CreateTime', title: '创建时间', width: 120, align: 'center' },
{ field: 'le_Type', title: '标题', width: 180, align: 'center' },
{ field: 'le_Dept', title: '岗位信息', width: 120, align: 'center' },
]],
})
});
function addTab(title, url) {
if ($('#tt').tabs('exists', title)) {
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>';
$('#tt').tabs('add', {
title: title,
content: content,
closable: true
});
}
}
function rowformater(value, row, index) {
return '<a href="#" style="color:red" onClick="delHsCode(' + index + ')">' + value + '</a>';
}
function delHsCode(index) {
$('#dg').datagrid('selectRow', index);
var row = $('#dg').datagrid('getSelected');
addTab(row.appr_nbr, 'JQLC/JQLC_Approval.aspx')
}
}
</script>
<body>
<form id="form1" runat="server">
<div id="tt" class="easyui-tabs" style="width: 1330px; height: 715px; margin-left: 265px; margin-top: 1px;">
<div title="Home">
<div style="margin: 5px;">
<table id="dg"></table>
</div>
</div>
</div>
</form>
</body>
2、后端代码:
声明:这是一个一般处理页面
public class SS_ApproveList : IHttpHandler
{
string conne = System.Configuration.ConfigurationManager.AppSettings.Get("connectionstring");
public void ProcessRequest(HttpContext context)
{
string name = context.Request.QueryString["AppName"];//前台传的标示值
string storeProcedureName = "sp_tasklist";
SqlParameter[] paras = new SqlParameter[]{
new SqlParameter("@application",SqlDbType.VarChar,30)
};
paras[0].Value = name;
DataTable dt = EL.DBUtitily.SqlHelper.GetTable(conne, CommandType.StoredProcedure, storeProcedureName, paras);
if (dt.Rows.Count>0)
{
string jsonstr = El.DBUtitily.JsonData.ShouwData(dt);
context.Response.Write(jsonstr);
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
运行后的效果图:
点击单号LEA210322009进行跳转页面如下(dome):
到这里,一个简单的easyUI数据的绑定和页面的跳转就实现了。