一、前台页面

<!--收支明细 start-->    
<table id="financeDetail"></table>    
<!--收支明细 end-->

二、js页面

$(function () {
   fgrid.bind();});var fMainUrl="/finance/ashx/financeMainHandler.ashx?t=d";var fgrid={
    bind:function(){
        $("#financeDetail").datagrid({
            nowrap: false, //折行           
url:fMainUrl,//
获取数据网址            rownumbers: true, //行号            striped: true, //隔行变色            idField: 'KeyId',//主键            singleSelect: true, //单选            frozenColumns: [[]],
            fitColumns:true,
            rowStyler: function(index,row){
            if (row.s=='支出'){
               return 'background-color:#cd740b;color:#fff;';
               }
            },//行样式            columns: [[
            {title:'序号',field:'KeyId',width:60,},
            {title:'收支',field:'s',width:60,},
            {title:'单位',field:'company',width:120},
            {title:'经手人',field:'userName',width:120},
            {title:'部门',field:'depName',width:120},
            {title:'收(付)账户',field:'accountName',width:200},
            {title:'合计金额',field:'total',width:120},
            {title:'实际金额',field:'payment',width:120},
            {title:'单号',field:'edNumber',width:120},
            {title:'备注',field:'note',width:120},
            {title:'添加时间',field:'add_time',width:120},
            {title:'更新时间',field:'up_time',width:120}               
            ]],
            toolbar: [{
                iconCls: 'icon-save',
                text:'注意：编辑好后请先点保存!',
                handler: function(){
                      //点头部文件动作               }
            }],
            view: detailview,
            detailFormatter:function(index,row){
                return '<div class="ddv" style="padding:5px 0"></div>';
            },
            onExpandRow: function(index,row){//展开的时候               
                 
                       $.ajax({
                        type: "POST",
                        url: "/finance/ashx/financeDetailHandler.ashx?t=list&KeyId="+row.KeyId+"",
                        data: {"filter":"{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"financeId\",\"op\":\"eq\",\"data\":\""+row.KeyId+"\"}],\"groups\":[]}"},
                        dataType: "json",
                        beforeSend: function () { },
                        complete: function () { },
                        success: function (d) {
                               //alert(JSON.stringify(d));                              var temptab="<table width=100% border=0 cellpadding=0 cellspacing=5><tbody>";
                                   temptab=temptab+"<tr bgcolor=#cccccc><td>科目名称</td><td>金额</td><td>备注</td><td>记录时间</td><td>入账时间</td></tr>";
                               var temptrtd="";
                               $.each(d, function(i,item) {    
                                       
                                      temptrtd=temptrtd+"<tr><td>"+item.subjectName+"</td><td>"+item.sumMoney+"</td><td>"+item.note+"</td><td>"+item.add_time+"</td><td>"+item.up_time+"</td></tr>";
                               });
                               temptab=temptab+temptrtd+"</tbody></table>";
                                
                               var ddv = $("#financeDetail").datagrid('getRowDetail',index).find('div.ddv');
                               ddv.panel({//把这个div 弄成面板                                 border:false,
                                    content:""+temptab+"",
                                    onLoad:function(){
                                        //$('#financeDetail').datagrid('fixDetailRowHeight',index);                                 }
                                });
                               $('#financeDetail').datagrid('fixDetailRowHeight',index);
                              
                            }
                        });         
                $('#financeDetail').datagrid('fixDetailRowHeight',index);
            },
            pagination: true,
            pageSize: 10,
            pageList: [10,20, 40, 50],
        });
    }}var grid = {
    bind: function (winSize) {
        $('#list').datagrid({
            url: actionURL,
            toolbar: '#toolbar',
            title: "数据列表",
            iconCls: 'icon icon-list',
            width: winSize.width,
            height: winSize.height,
            nowrap: false, //折行            rownumbers: true, //行号            striped: true, //隔行变色            idField: 'KeyId',//主键            singleSelect: true, //单选            frozenColumns: [[]],
            columns: [[
                {title:'编号',field:'KeyId',width:120},
            {title:'主表ID',field:'financeId',width:120},
            {title:'编号',field:'edNumber',width:120},
            {title:'科目名称',field:'subjectId',width:120},
            {title:'金额',field:'sumMoney',width:120},
            {title:'备注',field:'note',width:120},
            {title:'添加时间',field:'add_time',width:120},
            {title:'更新时间',field:'up_time',width:120}               
            ]],
            pagination: true,
            pageSize: PAGESIZE,
            pageList: [20, 40, 50]
        });
    },
    getSelectedRow: function () {
        return $('#list').datagrid('getSelected');
    },
    reload: function () {
        $('#list').datagrid('clearSelections').datagrid('reload', { filter: '' });
    }};function createParam(action, keyid) {
    var o = {};
    var query = top.$('#uiform').serializeArray();
    query = convertArray(query);
    o.jsonEntity = JSON.stringify(query);
    o.action = action;
    o.keyid = keyid;
    return "json=" + JSON.stringify(o);}var CRUD = {
    add: function () {
        var hDialog = top.jQuery.hDialog({
            title: '添加', width: 350, height: 300, href:formurl, iconCls: 'icon-add', submit: function () {
                if (top.$('#uiform').validate().form()) {
                    var query = createParam('add', '0');
                    jQuery.ajaxjson(actionURL, query, function (d) {
                        if (parseInt(d) > 0) {
                            msg.ok('添加成功！');
                            hDialog.dialog('close');
                            grid.reload();
                        } else {
                            MessageOrRedirect(d);
                        }
                    });
                }
                return false;
            }
        });
        
        top.$('#uiform').validate();
    },
    edit: function () {
        var row = grid.getSelectedRow();
        if (row) {
            var hDialog = top.jQuery.hDialog({
                title: '编辑', width: 350, height: 300, href: formurl, iconCls: 'icon-save',
                onLoad:function() {
                   top.$('#txt_KeyId').val(row.KeyId);
            top.$('#txt_financeId').val(row.financeId);
            top.$('#txt_edNumber').val(row.edNumber);
            top.$('#txt_subjectId').val(row.subjectId);
            top.$('#txt_sumMoney').val(row.sumMoney);
            top.$('#txt_note').val(row.note);
            top.$('#txt_add_time').val(row.add_time);
            top.$('#txt_up_time').val(row.up_time);
                        },
                submit: function () {
                    if (top.$('#uiform').validate().form()) {
                        var query = createParam('edit', row.KeyId);;
                        jQuery.ajaxjson(actionURL, query, function (d) {
                            if (parseInt(d) > 0) {
                                msg.ok('修改成功！');
                                hDialog.dialog('close');
                                grid.reload();
                            } else {
                                MessageOrRedirect(d);
                            }
                        });
                    }
                    return false;
                }
            });
            
        } else {
            msg.warning('请选择要修改的行。');
        }
    },
    del: function () {
        var row = grid.getSelectedRow();
        if (row) {
            if (confirm('确认要执行删除操作吗？')) {
                var rid = row.KeyId;
                jQuery.ajaxjson(actionURL, createParam('delete', rid), function (d) {
                    if (parseInt(d) > 0) {
                        msg.ok('删除成功！');
                        grid.reload();
                    } else {
                        MessageOrRedirect(d);
                    }
                });
            }
        } else {
            msg.warning('请选择要删除的行。');
        }
    }};