zoukankan      html  css  js  c++  java
  • easyui datagrid 表头与数据错位

    方法一:容易,实用的方法

    在jquery.easyui.min.js中查找到field.replace(/[.|s]/g, "-")在其后添加replace

    例子:field.replace(/[.|s]/g, "-").replace(/./g, function ($1) { return $1.charCodeAt(0).toString(16); });//有改动,目的是将其转为十六进制

    方法二:用过,借鉴的方法:onLoadSuccess:直接设置列宽

    $('#stthb_div').datagrid({
    data: [],
    //title: "分析",
    //iconCls:'icon-save',
    padding: "30px",
    nowrap: false,
    singleSelect: true,
    //striped: true,
    height: win_h,
    collapsible: true,
    resizable: false,
    //sortable: true,
    remoteSort: false,//本地数据排序
    //frozenColumns//不会滚动
    columns: [
    columns
    ]
    //bind数据成功设置列宽度
    , onLoadSuccess: function (data) {
    //datagrid头部 table 的最后一个tr 的td们,即columns的集合
    var headerTds = $(".datagrid-header-inner table tr:last-child").children();
    //datagrid主体 table 的首个tr 的td们,即第一个数据行
    var bodyTds = $(".datagrid-body table tr:first-child").children();
    var totalWidth = 0; //合计宽度,用来为datagrid头部和主体设置宽度
    //循环设置宽度
    bodyTds.each(function (i, obj) {
    var headerTd = $(headerTds.get(i));
    var bodyTd = $(bodyTds.get(i));
    //$("div:first-child", headerTds.get(i)).css("text-align", "center");
    var headerTdWidth = headerTd.width(); //获取第i个头部td的宽度
    //这里加5个像素 是因为数据主体我们取的是第一行数据,不能确保第一行数据宽度最宽,预留5个像素。有兴趣的朋友可以先判断最大的td宽度都在进行设置
    var bodyTdWidth = bodyTd.width();
    var width = 0;
    //如果头部列名宽度比主体数据宽度宽,则它们的宽度都设为头部的宽度。反之亦然
    if (headerTdWidth > bodyTdWidth) {
    width = headerTdWidth;
    bodyTd.width(width);
    headerTd.width(width);
    totalWidth += width;
    } else {
    width = bodyTdWidth;
    headerTd.width(width);
    bodyTd.width(width);
    totalWidth += width;
    }
    });
    var bodyTable = $(".datagrid-body table:first-child");
    //循环完毕即能得到总得宽度设置到头部table和数据主体table中
    //bodyTable.width(totalWidth + 55);
    bodyTable.width($(".datagrid-header-inner table tr:last-child").width());
    ///将所有的列都设置为可以排序
    var columns = $("#stthb_div").datagrid("options").columns[0];
    for (i = 0; i < columns.length; i++) {
    columns[i].sortable = true;
    };
    }
    });

    不积跬步,无以至千里。不积小流,无以成江海。千里之行,始于足下
  • 相关阅读:
    生成1--n的全排列
    小P的秘籍
    小P的字符串
    小P的金字塔
    2198: 小P当志愿者送餐
    交换排序(快速排序重点)
    关于上级机构的冲突性测试bug修复
    系统当前时间system.currenttimemillis与new Date().getTime() 区别
    Servlet中(Session、cookies、servletcontext)的基本用法
    默认图片展示(个人信息模块)
  • 原文地址:https://www.cnblogs.com/wusm/p/5643906.html
Copyright © 2011-2022 走看看