需求介绍:
点击第一个datagrid里面的节点名称,在页面上的第二个datagrid里面显示出它对应的相关信息。用jQuery MiniUI实现表单的联动效果:
关键代码:
(1)第一个datagrid实现:
<span style="font-family:KaiTi_GB2312;font-size:24px;"><strong><div id="datagrid1" class="mini-datagrid" style="width:100%;height:40%;" pageSize="20" url="@Url.Action("ApproveSettingDataLoad")" idField="id" multiSelect="true" allowCellEdit="true" selectOnLoad="true" onselectionchanged="onSelectionChanged" >
<div property="columns">
<div field="NodeName" id="NodeName" value="@ViewBag.NodeName" name="NodeName" width="30" align="left" headeralign="center" allowSort="false" >节点名称</div>
<div field="PlanType" name="plan" width="10" align="left" headeralign="center" allowSort="false">计划类型</div>
</div>
</div></strong></span>
(2)第二个datagrid实现:
<span style="font-family:KaiTi_GB2312;font-size:24px;"><strong> <div id="datagrid2" class="mini-datagrid" style="width:100%;height:50%;" pageSize="20" ondrawcell="onDrawCell" url="@Url.Action("QueryApprovalUserByApprovUserNameAndProcessID")" allowCellEdit="true" idField="id" multiSelect="true">
<div property="columns">
<div field="UserName" id="UserName" name="UserName" width="30" align="left" headeralign="center" allowSort="false">用户名称</div>
<div field="ApprovalType" width="10" align="left" headeralign="center" allowSort="false">审批类型</div>
<div field="oper" width="30" align="center" headeralign="center">
操作
</div>
</div>
</div></strong></span>
(3)实现联动效果
注意:在这里要做的是通过选中datagrid1中行,触发datagrid1的onselectionchanged事件。
<span style="font-family:KaiTi_GB2312;font-size:24px;"><strong> function onSelectionChanged(e) {
var grid = e.sender;
var record = grid.getSelected();
var nodeid = record.ID;
var approvalusername = "";
grid1.load({ processid: nodeid, ApprovalUserName: "" });
}</strong></span>
datagrid1的onselectionchanged事件触发了datagrid2的load事件。而datagrid2绑定了方法:QueryApprovalUserByApprovUserNameAndProcessID
从而实现了表单的联动效果。
(4)datagrid2数据加载
<span style="font-family:KaiTi_GB2312;font-size:24px;"><strong> #region"根据审批人姓名和过程ID查询审批信息
[HttpPost]
public JsonResult QueryApprovalUserByApprovUserNameAndProcessID(string ApprovalUserName, int processid)
{
try
{
//根据过程id查询查询审批人
var param = new ApprovalUser
{
PageIndex = int.Parse(Request["pageIndex"].ToString()) + 1,
PageSize = int.Parse(Request["pageSize"].ToString())
};
var Info = devicePSPlanBLL.QueryApprovalUserByApprovUserNameAndProcessID(param, ApprovalUserName, processid);
return Json(Info, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
icohLog.Error("计划数据查看-报错:", ex);
}
return null;
}
#endregion</strong></span>
动态效果可参考: