【知识积累】jQuery MiniUI实现表单联动

本文主要是介绍【知识积累】jQuery MiniUI实现表单联动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求介绍：

点击第一个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>

效果展示：

动态效果可参考：