DataGrid数据列表组件使用手册

最新推荐文章于 2024-06-08 16:58:12 发布

我是一只小小程序猿

最新推荐文章于 2024-06-08 16:58:12 发布

阅读量4.4k

点赞数

分类专栏： jsp 文章标签： html datagrid 数据 class 库

本文链接：https://blog.csdn.net/qq_28418887/article/details/78598098

版权

jsp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 列表组件
1.1 基本用法
1、当前页面引入grid组件类库

<c:set var="extLibs" value="grid"/>
<sys:header title="单表管理" extLibs="${extLibs}" />

2、定义列表HTML元素

<table id="dataGrid"></table>
<div id="dataGridPage"></div>

3、编写JavaScript代码实例化列表对象

<script type="text/javascript">
// 初始化DataGrid对象
    $("#dataGrid").dataGrid({

        searchForm: $('#searchForm'),      // 数据来源表单
        dataGridPage: $('#dataGridPage'),  // 分页显示容器
        tabPageId: '${param.tabPageId}',   // 当前页签编号（作为addTabPage的参数，2.1版本之后不再使用）

        // 设置数据表格列
        columnModel: [
            {header:'用户', name:'user.userName', index:'u2.user_name', width:200, frozen:true, formatter: function(val, obj, row, act){
                return val == '新增行' ? val : '<a href="${ctx}/test/testData/form?id='+row.id+'" class="btnList" data-title="编辑单表">'+(val ? val : row.id)+'</a>';
                }}, 
                {header:'备注', name:'remarks', index:'a.remarks', width:150},
            {header:'操作', name:'actions', width:100, sortable:false, formatter: function(val, obj, row, act){
                var actions = [];//<shiro:hasPermission name="test:testData:edit">
                if (row.status == Global.STATUS_NORMAL){
                    actions.push('<a href="${ctx}/test/testData/form?id='+row.id+'" class="btnList" title="编辑单表"><i class="fa fa-pencil"></i></a>&nbsp;');
    }//</shiro:hasPermission>

                return actions.join('');
            }}
        ],

        ajaxSuccess: function(data){ // 加载成功后执行方法

        }
    });
</script>

1.2 常用属性
调用方法：

var options = {属性名: 属性值};
$("#dataGrid").dataGrid(options);

1.2.1 主要参数

searchForm: $('#searchForm'),      // 数据来源表单
    dataGridPage: $('#dataGridPage'),  // 分页显示容器
tabPageId: '${param.tabPageId}',   // 当前页签编号

1.2.2 列字段参数

columnModel: [{

header:'用户名', // 列表的表头显示名称
name:'user.userName', // 数据实体属性名，实体类中的属性名，多级用.分隔
index:'u2.user_name', // 排序字段，数据表的表别名加字段名
width:200, // 当前列的列宽
align:"center" // 列字段文字的对齐方式（left、right、center）
fixed:false, // 默认false，是否固定列宽，不随屏幕大小百分比计算列宽
sortable:false, //是否允许列排序，普通列表下默认true，树表下默认false

// 列单元格数据自定义格式化数据函数（val：当前列值，obj：列对象，row：当前列所在行的数据，act：当前的操作是什么）

formatter: function(val, obj, row, act){

// 1、带链接的列
return val == '新增行' ? val : '<a href="${ctx}/test/testData/form?id='+row.id+'" class="btnList" data-title="编辑单表">'+(val ? val : row.id)+'</a>';

// 2、带操作按钮列
var actions = [];//<shiro:hasPermission name="test:testData:edit">
        if (row.status == Global.STATUS_NORMAL){

            // 1）默认的按钮，点击会自动打开新页签，注意class属性为btnList
            actions.push('<a href="${ctx}/test/testData/form?id='+row.id+'" class="btnList" title="编辑单表"><i class="fa fa-pencil"></i></a>&nbsp;');

// 2）弹出确认对话框后，ajax执行href的链接，并刷新列表，不弹出新tab页
            actions.push('<a href="${ctx}/test/testData/delete?id='+row.id+'" class="btnList" title="删除该单表" data-confirm="确认要删除该单表吗？"><i class="fa fa-trash-o"></i></a>&nbsp;'); 

// 3）弹出确认对话框后，ajax执行href的链接，并刷新列表，不弹出新tab页，执行后再执行一些js脚本
            actions.push('<a href="${ctx}/sys/area/delete?areaCode='+row.id+'" class="btnList" title="删除区划" data-confirm="确认要删除该区划及所有子区划吗？" data-confirm-success="$(\'#dataGrid\').dataGrid(\'delTreeNode\',\''+row.id+'\');"><i class="fa fa-trash-o"></i></a>&nbsp;');

            // 4）不执行默认方法，class没有btnList类，举例：弹出确认对话框，并删除当前行， 
            actions.push('<a href="#" onclick="confirmx(\'你确认要删除这条数据吗？\', function(){$(\'#dataGrid\').dataGrid(\'delRowData\',\''+obj.rowId+'\')});return false;"><i class="fa fa-trash-o"></i></a>&nbsp;');

                }//</shiro:hasPermission>
    return actions.join('');

// 3、字典数据列
return getDictLabel(${fns:getDictListJson('sys_area_type')}, val, '未知', true);

// 4、金额千位符列
return moneyFormat(val);

},

// 给单元格设置属性
cellattr: function(rowId, tv, rawObject, cm, rdata){
    return ' id="cell_' + rowId + '"';
}

}],

1.2.3 其他扩展参数

dataId: 'id', // 指定数据主键，当主键名称不是id的时候设置

lazyLoad: false, //是否懒加载Grid数据，默认初始列表后不及时加载数据，（仅对url远程请求数据有效），当调用 dataGrid.refresh()时再进行加载。

shrinkToFit: true,  // 是否按百分比自动调整列宽，当列比较多时可设置为false

showRownum: true,   // 是否显示行号
showCheckbox: false,// 是否显示复选框
sortableColumn: true,// 列表是否允许排序（设置为false后，整个列表不允许排序）

// 表格大小设置参数，autoGridHeight 和 autoGridWidth 可以是个函数，函数的返回值就是该表格的高度或宽度。
autoGridHeight: true, // 自动表格高度（设置为false后，不自动调整表格高度）设置为函数返回100%时表示自动高度，表单子表中可能需要，如：autoGridHeight: function(){return '100%'}
autoGridHeightFix: 0,  // 自动表格高度宽度（自动调整高度时修正的高度值）
autoGridWidth: true,  // 自动表格宽度（设置为false后，不自动调整表格宽度）
autoGridWidthFix: 0,  // 自动表格修复宽度（自动调整宽度时修正的宽度值）

// 窗体按钮绑定（不使用默认按钮或按钮ID不同时设置）
btnSearch: $("#btnSearch"),    // 查询按钮
btnRefreshTree: $("#btnRefreshTree"),  // 刷新树按钮
btnExpandTreeNode: $("#btnExpandTreeNode"),    // 展开树节点按钮
btnCollapseTreeNode: $("#btnCollapseTreeNode"), // 折叠树节点按钮

// 树结构表格参数
treeGrid: false,    // 启用树结构表格
treeColumn: null,   // 要展开的列名（默认第一列）
defaultExpandLevel: 0,// 默认展开的层次

// 分页相关字段（设置分页参数input对象）
inputPageNo: $("#pageNo", searchForm),// 当前页码字段
inputPageSize: $("#pageSize", searchForm), // 页面大小字段
inputOrderBy: $("#orderBy", searchForm),   // 排序字段

1.3 常用事件
1.3.1 数据加载事件

// 数据加载前执行方法
    ajaxLoad: function(data){ 

    },

    // 数据加载成功后执行方法
    ajaxSuccess: function(data){ 

    },

    // 数据加载失败后执行方法
    ajaxError: function(data){ 

    },
1.3.2   表格加载事件
    // 表格初始化完成后执行
    complete: function(){

    },
1.3.3   表格操作事件
// 选择行后调用（id:行id，isSelect：是否是选中，event：事件）
onSelectRow: function(id, isSelect, event){

    },
    // 单击列表表头上的全选按钮时调用（ids：选中的id数组，isSelect：是否选中）
    onSelectAll: function(ids, isSelect){

    },
// 双击表格行时调用（id：双击的行号，rownum：双击的行位置，column：双击的列）
    ondblClickRow: function(id, rownum, colnum, event){

    }
1.3.4   树表操作事件
// 展开节点事件
    onExpandNode: function(rc){

    },
    // 折叠节点事件
    onCollapseNode: function(rc){

}

1.4 常用方法
1.4.1 如何调用方法
$(‘#列表对象id’).dataGrid(‘方法名’, ‘参数1’, ‘参数2’, ‘参数3’, ‘参数4’, ‘参数5’); 举例：$ (‘#dataGrid’).dataGrid(‘getRowData’, id);
1.4.2 设置参数
$(‘#dataGrid’).dataGrid(‘setParam’, params, overwrite); params：设置参数值，如：{url: ‘/sys/user/listData’} overwrite：是否重写，如果设置参数为数组，则直接替换，不进行深度拷贝，原理如下： if(overwrite === true) { var params = $.extend({}, this.p, newParams); this.p = params; } else { $.extend(true,this.p,newParams); } 举例：datatype为local时，则更新数据方法为：$ (‘#roleGrid’).dataGrid(‘setParam’, {data:[{},{},{}]}, true);
$(‘#roleGrid’).dataGrid(‘refresh’); 1.4.3 获取参数$ (‘#dataGrid’).dataGrid(‘getParam’, paramName);
1.4.4 获取所有数据ID
$(‘#dataGrid’).dataGrid(‘getDataIDs’); 1.4.5 获取某一行数据$ (‘#dataGrid’).dataGrid(‘getRowData’, rowId);
1.4.1 获取全部行数据
$(‘#dataGrid’).dataGrid(‘getRowData’); 1.4.2 获取选择行ID$ (‘#dataGrid’).dataGrid(‘getSelectRow’);
1.4.3 获取选择行数组ID
$(‘#dataGrid’).dataGrid(‘getSelectRows’); 1.4.4 设置选择行 // isCancel: 是否是取消选中$ (‘#dataGrid’).dataGrid(‘getSelectRow’, id, isCancel);
1.4.5 刷新表格（带分页）
$(‘#dataGrid’).dataGrid(‘refresh’, pageNo, pageSize); 1.4.6 只刷新表格（重新载入）$ (‘#dataGrid’).dataGrid(‘reloadGrid’);
1.4.7 删除当前行（普通列表用）
$(‘#dataGrid’).dataGrid(‘delRowData’, id); 1.4.8 删除树节点（树结构用）$ (‘#dataGrid’).dataGrid(‘delTreeNode’, id);
1.4.9 展开树节点
// level：一次展开的层次（数值）
$(‘#dataGrid’).dataGrid(‘expandTreeNode’, level); 1.4.10 折叠树节点$ (‘#dataGrid’).dataGrid(‘collapseTreeNode’);
1.4.11 获取孩子节点
$(‘#dataGrid’).dataGrid(“getNodeChildren”, rowId); 1.4.12 刷新树表格 // expandLevel: 展开的层级， parentCode：跟节点编号（只显示哪一级）$ (‘#dataGrid’).dataGrid(‘refreshTree’, expandLevel, parentCode);
1.4.13 显示隐藏列
$(‘#dataGrid’).dataGrid(‘hideCol’, ‘列名’); //隐藏列$ (‘#dataGrid’).dataGrid(‘showCol’, ‘列名’); //显示列
1.5 高级应用
1.5.1 使用本地数据
1、关键属性：
data: ${fns:toJson(allRoles)}, // 本地数据（JSON格式） datatype: “local”, // 设置数据类型为，local（本地数据） rowNum: 1000 // 设置最大显示行数（如果不设置，默认为1000） 2、演示例子： // 用户编辑的选择角色示例$ (“#roleGrid”).dataGrid({
data: ${fns:toJson(allRoles)}, datatype: “local”, columnModel: [ {header:’角色名称’, name:’roleName’, sortable:false, width:100}, {header:’角色编码’, name:’roleCode’, sortable:false, width:100} ], showCheckbox: true, // 显示复选框 autoGridHeight: function(){ return ‘auto’; // 高度为自动高度 }, autoGridWidth: function(){ return $(‘#inputForm .tab-content’).width(); // 相对宽度 } }); // 复选框，选择行相应行 var ids = “$ {user.roleCodes}”.split(“,”);
for(var i=0; i

我是一只小小程序猿

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
DataGrid数据列表组件使用手册

1 列表组件 1.1 基本用法 1、当前页面引入grid组件类库<c:set var="extLibs" value="grid"/><sys:header title="单表管理" extLibs="${extLibs}" />2、定义列表HTML元素<table id="dataGrid"></table><div id="dataGridPage"></div>3、编写
复制链接

扫一扫