easyui 折叠数据表格使用

因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据

以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯

特此记录分享出来 有需要的朋友可以参考

我用的是.net MVC

首先在 视图层中创建表格

$('#IntentionsList').datagrid({
            loadMsg: "正在加载数据",
            url: '@Url.Action("GetList", "Contract")',
            width: $(window).width() - 10,
            methord: 'post',
            height: 300,
            width: 750,
            fitColumns: false,
            sortName: 'IntentionContractID',
            sortOrder: 'desc',
            idField: 'IntentionContractID',
            pageSize: 10,
            pageList: [10, 20, 30, 40, 50],
            pagination: true,
            striped: true, //奇偶行是否区分
            singleSelect: true,//单选模式
            rownumbers: true,//行号
            frozenColumns: [[
                           //   { field: 'ck', checkbox: true }//全选
                { field: 'IntentionContractID', title: '系统编号', hidden: true },
                { field: 'CaculationID', title: '结算客户ID', hidden: true },
                { field: 'IntentionContractNO', title: '意向合同编号', width: 180, align: 'center', sortable: true },
             
            ]],
            columns: [[
                   { field: 'CaculationName', title: '结算客户', width: 130, align: 'center' },
                {
                    field: 'ContractBody', title: '合同主体', width: 100, align: 'center', styler: function (value, row, index) {
                        if (value=="自提") {
                            return 'background-color:#ffee00;color:brown';
                        }
                    }
                },
                { field: 'ContractType', title: '合同类型', width: 100, align: 'center' },
                { field: 'TransportType', title: '运输方式', width: 100, align: 'center' },
                { field: 'ChangeAccording', title: '变更依据', width: 100, align: 'center' },
                     {
                         field: 'IsHouzhi', title: '是否后置', width: 100, align: 'center', styler: function (value, row, index) {
                             if (value) {
                                 return 'background-color:#ffee00;color:brown';
                             }
                         }, formatter: function (value) {

if (value) {
                                 value = "后置";
                                 return value;
                             } else {
                                 value = "非后置";
                                 return value;
                             }
                         }
                     },
                {
                    field: 'ISApproval', title: '是否通过', width: 80, align: 'center',
                    formatter: function (value) {
                        if (value) {
                            return "<img src='/Content/Images/icon/pass.png'/>";
                        } else {
                            return "<img src='/Content/Images/icon/no.png'/>";
                        }
                    }
                }
            ]],
            onDblClickRow: function (rowIndex, rowData) {
                var id = "#" + art.dialog.data('id');
                var name = "#" + art.dialog.data('name');
                var cid = "#" + art.dialog.data('cid');
                var cname = "#" + art.dialog.data('cname');
                var row = $('#IntentionsList').datagrid('getSelected');
                if (row != null) {
                    if (row.ISApproval) {
                        var intentionid = row.IntentionContractID;
                        var no = row.IntentionContractNO;
                        var originPage = $.dialog.open.origin;
                        originPage.$(id).val(intentionid);
                        originPage.$(name).val(no);
                        originPage.$(cid).val(row.CaculationID);
                        originPage.$(cname).val(row.CaculationName);
                        art.dialog.close();
                    } else {
                        alert('此合同未通过审核 不能选取');
                    }
                } else {
                    alert('未获取到行信息')
                }
            }
        });
        $('#IntentionsList').datagrid({       
            view: detailview,
            detailFormatter: function (index, row) {
                return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';
            },
            onExpandRow: function (index, row) {
                var row = $('#IntentionsList').datagrid('getSelected');
                if (row != null) {
                    $('#ddv-' + index).panel({
                        border: false,
                        cache: false,
                        href: '/Letters/ContractLetterDetail?id=' + row.IntentionContractID, //这里很重要是展开后加载数据用的
                        onLoad: function () {
                            $('#IntentionsList').datagrid('fixDetailRowHeight', index);
                        }
                    });
                    $('#IntentionsList').datagrid('fixDetailRowHeight', index);
                }
            }
        });

剩下的我就直接截图了 因为每个人需要的具体代码不同 主要看思路就好

运行效果

因为熬了整整一夜 还得修复项目的一些功能 所以写的比较简单 请读者见谅

笔者写程序虽然时间不长 但最近总觉得不能再让“拿来主义”左右自己了 为了进度有时可以这样 但是长久来看 其时这样是最吃亏了 往往同一个问题 甚至同一个知识点 反反复复看了N遍 还是总没弄明白 博客园虽然注册了有1年 但几乎没发过什么文章 虽然也解决过不少非常棘手的问题 但很少去具体思考很分析其中的设计以及底层的构造 结果总是事倍功半 出力不讨好不说，身体总是熬夜也顶不住 总觉得身边的同事以及朋友大部分时间是在应付工作不是为了想写好项目或者真正热爱程序而写，平时交流以及分享经验更是微乎其微，有时想想也挺可笑明明都是用的时候从网上下载下来按照需求改改 根本没有什么技术含金量 再不分享 更是闭门造车了 可能也跟当今社会大环境有关，现在心里五味陈杂，程序写的心累，不知道观看这篇文章的有没有这个感觉，越来越像代码工人 去堆积和复制粘贴自己之前或者网上已有的代码库 有时候想想程序应该是一种艺术是一种美轮美奂的而不是现在这种。可能说的多了耽误大家了

如果有不清楚datagrid 折叠数据的可以留言或者qq：674556037

以后我会经常总结发布一些自己体会和经验分享 希望有一天我也能成为一个大牛 至少老鸟也行(*^__^*)