【easyui】关于easyui Datagrid一些样式记录

此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图！！！！

一丶存在选中框的时候标题栏合并显示序号字段。

代码展示：

  onLoadSuccess: function (data) {
                     //调整 按钮div与datagrid之间的3px间距
                     $('#j_contentButton').css('height', '43px');
                     //修改全选按钮
                     $(".datagrid-header-check").html("序号");
                     $(".datagrid-header-check").parent().prev().html("");
                     $(".datagrid-header-check").attr("style", "width:79px !important;font-weight: 700;height: 40px; line-height: 40px;font-size: 15px;")
                 },

效果图展示：

二丶不存在选中框的时候标题栏合并显示序号字段。

代码展示：

     onLoadSuccess: function (data) {
                    //修改全选按钮
                    $(".datagrid-header-rownumber").html("序号");
                    $(".datagrid-header-rownumber").parent().next().html("");
                },

效果图展示：

三丶左右布局时去除间隔空隙注意第5行 他才是关键其余只是为了展示效果

代码展示：

 j_dgReceive = $("#j_dgReceive").datagrid({
                 iconCls: 'icon-save',
                 fit: true,  // 自动适应父容器大小
                 fitColumns: false, //自动收缩列的大小
                 scrollbarSize: ,
                 rownumbers: true, //显示列号
                 nowrap: true,     //如果为true，则在同一行中显示数据
                 animate: false,
                 border: false,   //有边框
                 singleSelect: true,//多选
                 idField: 'id',  //标识字段
                 pagination: true,//数据表格控件底部显示分页工具栏
                 pageSize: ,
                 pageList: [, , , , , , , ],
                 url: '/FeeManage_Areas/FeeStatistics/GetBJbyCondition',
                 queryParams: {
                     childId: childId,
                 },

效果图展示：

四丶实现单元格可编辑效果

代码展示：

 {
                         title: '退费金额', field: 'refundMoney', align: 'center', width: , sortable: true,
                         editor: {
                             type: 'validatebox',
                             options: {
                                 validType: 'checkDecN',
                                 onBeforeValidate: function () {
                                     $(this).attr('maxlength', );
                                     $(this).on("keyup", function (event) {
                                         var ary = this.value.match(/(\d+(\.\d{,})?)/);
                                         this.value = ary == null ? '' : ary[];
                                     });
                                 }

                             }
                         },
                     },

效果图展示：

五丶合并单元格跨行款列标题布局

代码展示：

  //活动列
                 columns: [[
                     { title: '园区名称', field: 'parkName', rowspan: , align: 'center', width: , sortable: true, },
                     { title: '姓名', field: 'childName', rowspan: , align: 'center', width: , sortable: true },
                     { title: '年级', field: 'gradeNo', rowspan: , align: 'center', width: , sortable: true, },
                     { title: '班级', field: 'classNo', rowspan: , align: 'center', width: , sortable: true, },
                     { title: '保教费', colspan: , align: 'center', },
                     { title: '学平险', colspan: , align: 'center', },
                     { title: '餐费', colspan: , align: 'center', },
                     { title: '休园管理费', colspan: , align: 'center', },
                     { title: '押金', colspan: , align: 'center', },
                     { title: '自定义费用', colspan: , align: 'center', },
                     { title: '幼儿缴费总额', field: 'childTotalReceive', rowspan: , align: 'center', width: , sortable: true, },
                     { title: '幼儿退费总额', field: 'childTotalRefund', rowspan: , align: 'center', width: , sortable: true, },
                 ], [
                     //保教费
                     { title: '缴费总额', field: 'bjfTotalReceive', align: 'center', width: , sortable: true, },
                     { title: '退费总额', field: 'bjfTotalRefund', align: 'center', width: , sortable: true, },
                     //学平险
                     { title: '缴费总额', field: 'xpxTotalReceive', align: 'center', width: , sortable: true, },
                     { title: '退费总额', field: 'xpxTotalRefund', align: 'center', width: , sortable: true, },
                     //餐费
                     { title: '缴费总额', field: 'cfTotalReceive', align: 'center', width: , sortable: true, },
                     { title: '退费总额', field: 'cfTotalRefund', align: 'center', width: , sortable: true, },
                     //休园管理费
                     { title: '缴费总额', field: 'xyglfTotalReceive', align: 'center', width: , sortable: true, },
                     { title: '退费总额', field: 'xyglfTotalRefund', align: 'center', width: , sortable: true, },
                     //押金
                     { title: '缴费总额', field: 'yjTotalReceive', align: 'center', width: , sortable: true, },
                     { title: '退费总额', field: 'yjTotalRefund', align: 'center', width: , sortable: true, },
                     //自定义
                     { title: '缴费总额', field: 'zdyTotalReceive', align: 'center', width: , sortable: true, },
                     { title: '退费总额', field: 'zdyTotalRefund', align: 'center', width: , sortable: true, },

                 ]],

效果图展示：

六丶修改选中框样式

代码展示：

//冻结列
                frozenColumns: [[
                    {
                        title: '', field: 'printFlag', align: 'center', sortable: true, width: ,
                        formatter: function (value, row, index) {
                            if (value == ) {
                                return "<span class='item-selected' onclick='specificUtil.CheckOrUnCheck(" + index + ",\"" + row.id + "\")'></span>";
                            } else {
                                return "<span class='item-unselected' onclick='specificUtil.CheckOrUnCheck(" + index + ",\"" + row.id + "\")'></span>";
                            }
                        },
                    },
                    { title: '主键', field: 'id', sortable: true, align: 'center', width: , hidden: true, },
                ]],

 //3.选中或取消选中
        CheckOrUnCheck: function (index, rowId) {
            var rows = $("#j_dgExamine").datagrid("getRows");
            if (initClick != undefined) {
                var row = rows[index];
                //提交数据
                $.ajax({
                    type: 'POST',
                    url: '/Welfare_Areas/WelfareExamine/AccMark',
                    data: {
                        accId: rowId
                    },
                    dataType: 'json',
                    cache: false,
                    success: function (jsonData) {
                        myUitls.procAjaxMsg(jsonData, function () {
                            row.printFlag = row.printFlag == "" ? "" : "";
                            if (row.printFlag == "") {
                                $("#j_dgExamine").datagrid("updateRow", {
                                    index: index,
                                    row: row
                                })
                                $("#j_dgExamine").datagrid('beginEdit', index);
                            }
                            else {
                                $("#j_dgExamine").datagrid('endEdit', index);
                                $("#j_dgExamine").datagrid('cancelEdit', index);
                            }

                            $(".datagrid-editable-input").attr("maxlength", )
                        }, function () {
                            myUitls.alertMsg(jsonData.Msg, '提示', null);
                            //取消确定按钮聚焦效果
                            myUitls.cancleFocus();
                            return;
                        });
                    }
                });
            }
        },

样式代码：

/*有叉号样式*/
.item-selected {
    width: 18px;
    height: 18px;
    float: right;
    text-align: center;
    background-image: url(../../../../images/area/Common/select_sel2.png);
    cursor: pointer;
}

/*无叉号样式*/
.item-unselected {
    width: 18px;
    height: 18px;
    float: right;
    text-align: center;
    background-image: url(../../../../images/area/Common/select_nor2.png);
    cursor: pointer;
}

 onLoadSuccess: function (data) {

$(".datagrid-header-rownumber").html("序号");
                      $(".datagrid-header-rownumber").parent().next().css("display","none");
                      $(".datagrid-header-rownumber").attr("style", "width:65px !important;height:40px;line-height:40px;font-weight: 700;font-size: 14px;")

                 },

效果展示：