BPM使用ligerUI实现主从表显示

先看一下效果图：

界面有待美化，嘿嘿，下面说一下实现过程，当然，我的代码可能不对，就比如后台给前端返回JSON对象，应该包括状态和消息和数据，我这里直接给返回了JSON对象，所以，如果有大神，您知道怎么处理的话，请不吝赐教哦！

前端代码：

这里的子表数据我为了方便直接创建了一个JSON对象，当然也可以从数据库读取数据

 <%@ Page Title="" Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="sqlTest.aspx.cs" Inherits="Sheets_sqlTest_sqlTest" %>

 <%@ Register Assembly="OThinker.H3.WorkSheet" Namespace="OThinker.H3.WorkSheet" TagPrefix="SheetControls" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="Server">
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="Server">
     <link href="ligerUI/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
     <script src="ligerUI/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
     <script src="ligerUI/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
     <style>
         .l-grid-detailpanel-inner{
             height:auto !important;
         }
     </style>
     <script type="text/javascript">
         console.log("js从这里开始运行");
         var ajaxurl = 'sqlTest.aspx?Action=GETDATA';
         $.post(ajaxurl, function (datas) {
             console.log("ajax获取成功");
             console.log(JSON.parse(datas));
             //        //调用ligerGrid
             var columns = [
                 { display: '主键', name: 'id', type: 'int', minWidth: , width:  },
                 { display: '名称', name: 'name' },
                 { display: '编号', name: 'number' },
                 { display: '类型', name: 'type' },
                 { display: '单位', name: 'unit' },
                 { display: '单价', name: 'price' },
                 { display: '数量', name: 'quantity' },
                 { display: '备注', name: 'note' }
             ];

             console.log(columns);
             //$(function () {
                 $("#maingrid").ligerGrid({
                     columns: columns,
                     data: JSON.parse(datas),
                     //1，标题：配置title和showTitle:true即可
                     title: '我的表格', showTitle: true,
                     //2，宽度：ligerGrid会根据列自动计算出表格的宽度，当然也可以指定一个数值或者百分比来设置宽度
                     width: '100%',
                     //3，分页：默认是使用分页的，如果不想使用分页，可以配置 usePager :false
                     //usePager :false,
                     //4，滚动条：内容有太多的行时会出现滚动体，如果不想显示，可以通过配置isScroll设置是否出现滚动体
                     isScroll: true,
                     showTitle: false, width: '90%', /*columnWidth: 120,*/
                     detail: { onShowDetail: f_showOrder },
                     onError: function (a, b) {
                     }

                 });
             //});
             //子表数据准备
             var jsonObj = {};
             jsonObj.Rows = [
                 { id: , cpu: "I3", disk: "500G", graphicscard: "2G", memory: "4G" },
                 { id: , cpu: "I5", disk: "500G", graphicscard: "2G", memory: "4G" },
                 { id: , cpu: "I7", disk: "1T", graphicscard: "4G", memory: "8G" },
                 { id: , cpu: "I3", disk: "500G", graphicscard: "2G", memory: "4G" },
                 { id: , cpu: "I5", disk: "500G", graphicscard: "2G", memory: "4G" },
                 { id: , cpu: "I7", disk: "1T", graphicscard: "4G", memory: "8G" },
             ];
             //子表
             function f_showOrder(row, detailPanel, callback) {
                 var grid = document.createElement('div');
                 $(detailPanel).append(grid);
                 $(grid).css('margin', ).ligerGrid({
                     columns: [
                                 { display: 'CPU', name: 'cpu' },
                                 { display: '硬盘', name: 'disk' },
                                 { display: '显卡', name: 'graphicscard'},
                                 { display: '内存', name: 'memory' }
                     ], isScroll: false, showToggleColBtn: false, width: '90%',
                     data: f_getOrdersData(row.id), showTitle: false, columnWidth: ,
                      onAfterShowData: callback, frozen: false
                 });
             }
             //子表数据验证
             function f_getOrdersData(id) {
                 var data = { Rows: [] };
                 for (var i = ; i < jsonObj.Rows.length; i++) {
                     if (jsonObj.Rows[i].id == id)
                         data.Rows.push(jsonObj.Rows[i]);
                 }
                 return data;
             }
         });

     </script>
     <div style="height: 800px;">
         <div id="maingrid"></div>
     </div>
 </asp:Content>

后台代码：

 using OThinker.H3.Portal;
 using System;
 using System.Collections;
 using System.Collections.Generic;
 using System.Data;
 using System.Linq;
 using System.Web;
 using System.Web.Script.Serialization;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 public partial class Sheets_sqlTest_sqlTest : PortalPage
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         DoAction();
     }
     public void DoAction()
     {
         string actionCode = Request.QueryString["Action"] ?? "";
         if (actionCode.ToUpperInvariant()=="GETDATA")
         {
             object jsonObj = null;
             jsonObj = GetSupplies();
             if (jsonObj != null)
             {
                 object n= new JavaScriptSerializer().Serialize(jsonObj);
                 Response.Write(n);
                 Response.End();
             }
         }

     }

     private object GetSupplies()
     {
         DataTable dt = new DataTable();

         string strsql = "select * from M_supplies ;";
         dt = OThinker.H3.WorkSheet.AppUtility.Engine.EngineConfig.CommandFactory.CreateCommand().ExecuteDataTable(string.Format(strsql));
         List<Dictionary<string, object>> lists = new List<Dictionary<string, object>>();

         foreach (DataRow dr in dt.Rows)
         {
             Dictionary<string, object> list = new Dictionary<string, object>();
             list.Add("id", dr["id"].ToString());
             list.Add("name", dr["name"].ToString());
             list.Add("number", dr["number"].ToString());
             list.Add("type", dr["type"].ToString());
             list.Add("unit", dr["unit"].ToString());
             list.Add("price", dr["price"].ToString());
             list.Add("quantity", dr["quantity"].ToString());
             list.Add("note", dr["note"].ToString());

             lists.Add(list);
         }

         var gridData = new { Rows = lists };
         return gridData;
     }
 }