先看一下效果图：
界面有待美化，嘿嘿，下面说一下实现过程，当然，我的代码可能不对，就比如后台给前端返回JSON对象，应该包括状态和消息和数据，我这里直接给返回了JSON对象，所以，如果有大神，您知道怎么处理的话，请不吝赐教哦！
前端代码：
这里的子表数据我为了方便直接创建了一个JSON对象，当然也可以从数据库读取数据
1 <%@ Page Title="" Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="sqlTest.aspx.cs" Inherits="Sheets_sqlTest_sqlTest" %> 2 3 <%@ Register Assembly="OThinker.H3.WorkSheet" Namespace="OThinker.H3.WorkSheet" TagPrefix="SheetControls" %> 4 <asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="Server"> 5 </asp:Content> 6 <asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="Server"> 7 <link href="ligerUI/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 8 <script src="ligerUI/lib/ligerUI/js/core/base.js" type="text/javascript"></script> 9 <script src="ligerUI/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> 10 <style> 11 .l-grid-detailpanel-inner{ 12 height:auto !important; 13 } 14 </style> 15 <script type="text/javascript"> 16 console.log("js从这里开始运行"); 20 var ajaxurl = 'sqlTest.aspx?Action=GETDATA'; 21 $.post(ajaxurl, function (datas) { 22 console.log("ajax获取成功"); 23 console.log(JSON.parse(datas)); 24 // //调用ligerGrid 25 var columns = [ 26 { display: '主键', name: 'id', type: 'int', minWidth: 40, width: 100 }, 27 { display: '名称', name: 'name' }, 28 { display: '编号', name: 'number' }, 29 { display: '类型', name: 'type' }, 30 { display: '单位', name: 'unit' }, 31 { display: '单价', name: 'price' }, 32 { display: '数量', name: 'quantity' }, 33 { display: '备注', name: 'note' } 34 ]; 35 36 console.log(columns); 37 //$(function () { 38 $("#maingrid").ligerGrid({ 39 columns: columns, 40 data: JSON.parse(datas), 41 //1，标题：配置title和showTitle:true即可 42 title: '我的表格', showTitle: true, 43 //2，宽度：ligerGrid会根据列自动计算出表格的宽度，当然也可以指定一个数值或者百分比来设置宽度 44 width: '100%', 45 //3，分页：默认是使用分页的，如果不想使用分页，可以配置 usePager :false 46 //usePager :false, 47 //4，滚动条：内容有太多的行时会出现滚动体，如果不想显示，可以通过配置isScroll设置是否出现滚动体 48 isScroll: true, 49 showTitle: false, width: '90%', /*columnWidth: 120,*/ 50 detail: { onShowDetail: f_showOrder }, 51 onError: function (a, b) { 52 } 53 54 }); 55 //}); 56 //子表数据准备 57 var jsonObj = {}; 58 jsonObj.Rows = [ 59 { id: 1, cpu: "I3", disk: "500G", graphicscard: "2G", memory: "4G" }, 60 { id: 2, cpu: "I5", disk: "500G", graphicscard: "2G", memory: "4G" }, 61 { id: 3, cpu: "I7", disk: "1T", graphicscard: "4G", memory: "8G" }, 62 { id: 4, cpu: "I3", disk: "500G", graphicscard: "2G", memory: "4G" }, 63 { id: 5, cpu: "I5", disk: "500G", graphicscard: "2G", memory: "4G" }, 64 { id: 6, cpu: "I7", disk: "1T", graphicscard: "4G", memory: "8G" }, 65 ]; 66 //子表 67 function f_showOrder(row, detailPanel, callback) { 68 var grid = document.createElement('div'); 69 $(detailPanel).append(grid); 70 $(grid).css('margin', 10).ligerGrid({ 71 columns: [ 72 { display: 'CPU', name: 'cpu' }, 73 { display: '硬盘', name: 'disk' }, 74 { display: '显卡', name: 'graphicscard'}, 75 { display: '内存', name: 'memory' } 76 ], isScroll: false, showToggleColBtn: false, width: '90%', 77 data: f_getOrdersData(row.id), showTitle: false, columnWidth: 100, 78 onAfterShowData: callback, frozen: false 79 }); 80 } 81 //子表数据验证 82 function f_getOrdersData(id) { 83 var data = { Rows: [] }; 84 for (var i = 0; i < jsonObj.Rows.length; i++) { 85 if (jsonObj.Rows[i].id == id) 86 data.Rows.push(jsonObj.Rows[i]); 87 } 88 return data; 89 } 90 }); 91 92 </script> 93 <div style="height: 800px;"> 94 <div id="maingrid"></div> 95 </div> 96 </asp:Content>
后台代码：
1 using OThinker.H3.Portal; 2 using System; 3 using System.Collections; 4 using System.Collections.Generic; 5 using System.Data; 6 using System.Linq; 7 using System.Web; 8 using System.Web.Script.Serialization; 9 using System.Web.UI; 10 using System.Web.UI.WebControls; 11 public partial class Sheets_sqlTest_sqlTest : PortalPage 12 { 13 protected void Page_Load(object sender, EventArgs e) 14 { 15 DoAction(); 16 } 17 public void DoAction() 18 { 19 string actionCode = Request.QueryString["Action"] ?? ""; 20 if (actionCode.ToUpperInvariant()=="GETDATA") 21 { 22 object jsonObj = null; 23 jsonObj = GetSupplies(); 24 if (jsonObj != null) 25 { 26 object n= new JavaScriptSerializer().Serialize(jsonObj); 27 Response.Write(n); 28 Response.End(); 29 } 30 } 31 32 } 33 34 private object GetSupplies() 35 { 36 DataTable dt = new DataTable(); 37 38 string strsql = "select * from M_supplies ;"; 39 dt = OThinker.H3.WorkSheet.AppUtility.Engine.EngineConfig.CommandFactory.CreateCommand().ExecuteDataTable(string.Format(strsql)); 42 List<Dictionary<string, object>> lists = new List<Dictionary<string, object>>(); 43 44 foreach (DataRow dr in dt.Rows) 45 { 46 Dictionary<string, object> list = new Dictionary<string, object>(); 47 list.Add("id", dr["id"].ToString()); 48 list.Add("name", dr["name"].ToString()); 49 list.Add("number", dr["number"].ToString()); 50 list.Add("type", dr["type"].ToString()); 51 list.Add("unit", dr["unit"].ToString()); 52 list.Add("price", dr["price"].ToString()); 53 list.Add("quantity", dr["quantity"].ToString()); 54 list.Add("note", dr["note"].ToString()); 55 56 lists.Add(list); 57 } 58 59 var gridData = new { Rows = lists }; 60 return gridData; 79 } 80 }