需求介紹：

點選第一個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>
 

<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>
 

注意：在這裡要做的是通過選中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>
 

從而實現了表單的聯動效果。

（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>

動態效果可參考：