easyui在添加一个datagrid之后表头错乱

easyui在添加一个datagrid之后表头错乱

将包含该弹窗的页面中的 datagrid 注释掉之后，表头正常显示，一加上就出现其他表头错乱的问题。

最正常的问题是，在拖动列宽的时候，没有起到任何的作用，无法正常的拖动。刷新之后，表头还是错乱的情况，没有任何改善。

搜集了好多种方法：

1. 说的是，filed 属性名称重复

2. 说的是，title 包含特殊字符

3. 说的是，返回数据中含有特殊字符

4. easyui有惰性，当有多个datagrid同时存在并且有人初始化查询过，就可能导致另外的datagrid查询后不再设置宽度，从而导致列挤在一起，只需将这里的if判断注释掉，改成全部都会设置宽度就不会再出现这种情况。如下：

 这里是1.3.6版本的，如果大家用的别的版本可以试着搜一下相关的语句。

if(s.indexOf(_513)==-1){
tmp.push([s,_50a.cache[s].width]);
}

但是公司老项目中，没有找到相关的语句。只好另辟蹊径。

 

我的解决方法：

不是说的easyui 有惰性，猜想是不是，没有加载到相应的css 或者 js 文件，然后针对有问题的datagrid 进行专门的初始化操作。

1.修改 datagrid 的加载方式，之前是在在定义表格的里面进行加载，现在将表格和 要加载 datagrid 的 id 分开，使用手动的加载方式，增加复用性

2. 对表格先进行空值的初始化，因为在修改上面的加载方式后，刚进入页面，表头还是错乱的（好像是可以对列的宽度进行拖动了，具体的不是很清楚，只关注怎么讲问题解决，然后发版了），然后点击查询刷新页面，错乱问题消失

 

js 的大概逻辑；

$(function () {
    //第一次加载，空数据表格加载
    var property = initDatagrid();
    $('#id').datagrid(property);
    $('#id').datagrid('loadData', {total: 0, row: []});
});

function chushihua() {
    //第二次加载，传参加载
    var property = initDatagrid();
    property.url = 'xxxxxxxxxxx'; //路径
    
    //传参方式一
    // var param = $('#searchForm').serializeObject();
    // $('#id').datagrid('load', param);
    
    //传参方式二
    property.queryParams = {"name": anme, "age": age};
    
    $('#id').datagrid(property);
}


function initDatagrid() {
    var property = {
        pagination: true,
        rownumbers: true,
        singleSelect: true,
        fitColumns: true,
        method: 'post',
        dataType: 'json',
        pageSize: 10,
        pageList: [20, 40, 80],
        loadMsg: '正在加载数据...',
        toolbar: '#toobar',
        onLoadError: function () {
            $(this).datagrid('loadData', {total: 0, row: []});
            $.messager.alert('提示', '加载失败，请重试！！！', 'info');
            return;
        },
        columns: [[
            {field: 'code', title: 'Code', align: 'center'},
            {field: 'name', title: 'Name', align: 'center'},
            {field: 'price', title: 'Price', align: 'center'},
            {
                field: 'suitable', title: 'Suitable', align: 'center', formatter: function (value, row, index) {
                    //进行一些操作
                }
            }
        ]],
        onClickRow: oneClick //当用户点击一行时触发
    };

    return property;

}

function oneClick(rowindex, rowData) {
    //rowIndex：被点击行的索引，从 0 开始
    // rowData：被点击行对应的记录 
}

 

如果是某个事件，样式什么的最好是去官方网站查看文档，学会查看文档，要比在网上搜索解决方法更加有效，当然是基本语法，对框架的具体使用和细节方面还得依靠广大的网友。