【知识积累】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>

效果展示：

动态效果可参考：

http://www.miniui.com/demo/#src=datagrid/detailgrid.html