jeasyui分类显示

这个主要用于jeasyui框架

如图所示

要想显示为上面的效果，在js中应该写如下的代码

var grid = {
    bind: function (winSize) {
        $('#list').datagrid({
            url: actionURL+"?op=list",
            toolbar: '#toolbar',
            title: "财务账户管理列表",
            iconCls: 'icon icon-list',
            width: winSize.width,
            height: winSize.height,
            nowrap: false, //折行
            rownumbers: true, //行号
            striped: true, //隔行变色
           
//分类显示主要代码
            idField: 'FinancialAccountsId', //主键
            singleSelect: true, //单选
            groupField: 'ForUse', //要分类显示的字段
            view: groupview, //这个是引入js文件才会有
            groupFormatter: function (value, rows) {
                return value + '- '+' 数量(<font color=red >'+rows.length+'</font>)';
            },
//分类显示的代码

            columns: [[//非冻结行
                { title: '账户序号', field: 'FinancialAccountsId', checkbox: true },

                { title: '建立日期', field: 'CreationDate', width: 110 },
    //{ title: '账户编号', field: 'AccountNumber' ,width: 100     ,rowspan: 2 },
    { title: '账户名称', field: 'AccountName', width: 200 },
                { title: '账号', field: 'BankAccount', width: 180 },
                { title: '开户行', field: 'BankName', width: 230 },

                { title: '类型', field: 'Type', width: 50, sortable: true },
    { title: '当前余额', field: 'InitialBalance', width: 120, formatter: formatmoney,align:'right' },
    { title: '创建人', field: 'CreateUser', width: 50, align: 'center', sortable: true },
               
   
    //{ title: '网银账号', field: 'WebBankAccount' ,width: 200     ,rowspan: 2 },
    //{ title: '网银标识', field: 'WebBankLogo', width: 100 },              
                 {//添加启用/停用
                     title: '启用/停用',
                     field: 'UseState',
                     width: 60,
                     align: 'center',
                     rowspan: 2,
                     formatter: function (v, d, i) {
                         return '<img style="cursor:pointer" title="启用/停用" onclick="javascript:setUserAttrQiCh(\'OnOff\',' + d.FinancialAccountsId + ',\'' + v + '\')" src="/css/icon/16/bullet_' + (v == "启用" ? "tick.png" : "minus.png") + '" />';
                     }
                 },
   
//     { title: '使用状态', field: 'UseState' ,width: 100 ,sortable: true   , formatter: function (val, row) {
//     switch(val){
//case '0':return '否';case '1':return '是';
//     }
//} ,rowspan: 2 },
    {
        title: '帐户详细', field: 'operation', width: 60, formatter: function (val, row) {
        return "<input type='button' value='详细' onclick='show("+row.FinancialAccountsId+")'/>";
} ,rowspan: 2 }
            ]],          

            pagination: true,
            pageSize: 100,
            pageList: [100,200,500],
            rowStyler: function (index, row, css) {//行样式
                if (row.FinancialAccountsStatus ) {
                    return 'font-weight:bold;color:blue;'; //background-color:red;color:red;//背景色和前景色//font-weight:bold;字加粗
                }
            },
            //单击事件
            onClickRow: function (rowIndex, rowData) {//单击获取ID
                //                selectedRow = null;
                //                var rows = $('#list').datagrid("getChecked");
                //                for (var i = 0; i < rows.length; i++) {
                //                    if (rows[i] == rowData) {
                //                        selectedRow = rowData;
                //                        return;
                //                    }
                //                } //end for
            },
            //双击事件
            onDblClickRow: function (rowIndex, rowData) {//双击进入某一页面
                $('#list').datagrid('selectRow', rowIndex); //选中行
                selectedRow = rowData;
                show2(rowData.FinancialAccountsId, rowData.AccountName, rowData.BankAccount);
            },
            //复选框选中事件
            onCheck: function (rowIndex, rowData) {
                selectedRow = null;
                var rows = $('#list').datagrid("getChecked");
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i] == rowData) {
                        selectedRow = rowData;
                        return;
                    }
                } //end for
            },
            //复选框取消选中事件
            onUncheck: function (rowIndex, rowData) {
                selectedRow = null;
                var rows = $('#list').datagrid("getChecked");
                if (rows.length) {
                    selectedRow = rows[0];
                }
            },
            //数据加载成功事件
            onLoadSuccess: function (data) {
                if (selectedRow) {
                    var s = selectedRow.Row;
                    $('#list').datagrid("clearChecked");
                    for (var i = 0; i < data.rows.length; i++) {
                        if (data.rows[i].Row == s) {
                            $('#list').datagrid("checkRow", i);
                            break;
                        }
                    } //end for
                }
            },
            //全部选中事件
            onCheckAll: function (rows) {
                var rows = $('#list').datagrid("getChecked");
                if (rows.length) {
                    selectedRow = rows[0];
                }
            },
            //取消全部选中事件
            onUncheckAll: function (rows) {
                selectedRow = null;
            }
            /*
           , enableHeaderClickMenu: true,        //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
            enableHeaderContextMenu: true,      //此属性开启表头列名称右键点击菜单
            enableRowContextMenu: false,
            dndRow: true,
            moveMenu: { submenu: false, top: true, up: true, down: true, bottom: true },    //开始行右键菜单的移动列功能，此属性可丰富配置，详情见 API 文档
            selectOnRowContextMenu: true,       //此属性开启当右键点击行时自动选择该行的功能
            autoBindDblClickRow: false,
            rowTooltip: true
,rowTooltip: function (index, row) {
            var text = "这是自定义的内容，该行的行索引号为" + index + ",数据ID为" + row.FinancialAccountsId + ",Name为" + row.FinancialAccountsName
            return $("<span></span>").css("color", "Red").text(text);
                    }
           
            autoEditing: true,          //该属性启用双击行时自定开启该行的编辑状态
            extEditing: true,           //该属性启用行编辑状态的 ExtEditing 风格效果，该属性默认为 true。
            singleEditing: false        //该属性为 false 时禁用 datagrid 的只允许单行编辑效果，也就是允许多行同时编辑*/
        });
    },

注意：

在default中引入js文件

<script src="/scripts/easyui/datagrid-groupview.js"></script>