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: 40,  100 },
                { 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会根据列自动计算出表格的宽度，当然也可以指定一个数值或者百分比来设置宽度
                     '100%',
                    //3，分页：默认是使用分页的，如果不想使用分页，可以配置 usePager :false
                    //usePager :false,
                    //4，滚动条：内容有太多的行时会出现滚动体，如果不想显示，可以通过配置isScroll设置是否出现滚动体
                    isScroll: true,
                    showTitle: false,  '90%', /*columnWidth: 120,*/
                    detail: { onShowDetail: f_showOrder },
                    onError: function (a, b) {
                    }

                });
            //});
            //子表数据准备
            var jsonObj = {};
            jsonObj.Rows = [
                { id: 1, cpu: "I3", disk: "500G", graphicscard: "2G", memory: "4G" },
                { id: 2, cpu: "I5", disk: "500G", graphicscard: "2G", memory: "4G" },
                { id: 3, cpu: "I7", disk: "1T", graphicscard: "4G", memory: "8G" },
                { id: 4, cpu: "I3", disk: "500G", graphicscard: "2G", memory: "4G" },
                { id: 5, cpu: "I5", disk: "500G", graphicscard: "2G", memory: "4G" },
                { id: 6, 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', 10).ligerGrid({
                    columns: [
                                { display: 'CPU', name: 'cpu' },
                                { display: '硬盘', name: 'disk' },
                                { display: '显卡', name: 'graphicscard'},
                                { display: '内存', name: 'memory' }
                    ], isScroll: false, showToggleColBtn: false,  '90%',
                    data: f_getOrdersData(row.id), showTitle: false, columnWidth: 100,
                     onAfterShowData: callback, frozen: false
                });
            }
            //子表数据验证
            function f_getOrdersData(id) {
                var data = { Rows: [] };
                for (var i = 0; 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;
    }
}