easyui 隔行渐变色属性设置

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 176 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript配置数据表格的方法，包括如何设置表格的基本属性、应用隔行变色效果等，适用于展示拍卖数据等场景。

1.部分JS文件

function getAgencyDealTable(begin,end,regionFlag,agencyId){
    $('#reportList').datagrid({
        idField : 'id', // 只要创建数据表格 就必须要加 ifField
        title : '',
        fit : true,
        url : parent.baseUrl+"report/findAucAgencyDealCount",
        method : 'GET',
        queryParams: {beginTime:begin,endTime:end,regionFlag:regionFlag,agencyId:agencyId},
        fitColumns : false,
        striped : false, // 隔行变色特性  不渐变色
        loadMsg : '数据正在加载,请耐心的等待...',
        rownumbers : true,
        rowStyler : function(index, record) {
//            console.log(record);
        },
        columns : [ [ {
            field : 'aucagencyName',
            title : '拍品分类',
            width : 290,
            align : 'center'
        },  {
            field : 'aucLotCount',
            title : '拍品件数',
            width : 150,
            align : 'center'
        }, {
            field : 'aucLotDealCount',
            title : '成交件数',
            width : 150,
            align : 'center'
        }, {

2.效果

另外一种方法：

function getAgencyDealTable(begin,end,regionFlag,agencyId){
    $('#reportList').datagrid({
        idField : 'id', // 只要创建数据表格 就必须要加 ifField
        title : '',
        fit : true,
        url : parent.baseUrl+"report/findAucAgencyDealCount",
        method : 'GET',
        queryParams: {beginTime:begin,endTime:end,regionFlag:regionFlag,agencyId:agencyId},
        fitColumns : false,
        striped : true, // 隔行变色特性
        loadMsg : '数据正在加载,请耐心的等待...',
        rownumbers : true,
        rowStyler : function(index, record) {
//            console.log(record);
        },
        columns : [ [ {
            field : 'aucagencyName',
            title : '拍品分类',
            width : 290,
            align : 'center'
        },  {
            field : 'aucLotCount',
            title : '拍品件数',
            width : 150,
            align : 'center'
        }, {

实际效果：（隔行渐变色）