使用jQuery的jquery.fixedheadertable时出现的问题

  先上jsp代码片段,如下: 图片说明

  当我加上代码中选中的部分时,表格效果就变成了这样:
图片说明

  其中表头和左侧两列实现了固定,但是可以看到,表头和左侧两列的字段都变成了空白,而如果去掉“fixedColumns: 2”这句代码后,就一切正常,请问这是什么原因呢?

1个回答

你应该在加载数据里写固定列的代码,而不是单独去写。在你加载数据的js里写。

easyui 例子:
<script type="text/javascript">
    var dataGrid;
    var orders = '${USER_SESSION.funIds}';
    $(function() {

        dataGrid = $('#dataGrid').datagrid({
            loadMsg: '数据加载中....',
            url: '${pageContext.request.contextPath}/sdCstmInfoController.do?cstmGrid2',
            fit: true,
            fitColumns: true,
            border: false,
            pagination: true,
            idField: 'id',
            pageSize: 10,
            pageList: [10, 20, 50, 100, 200],
            sortName: 'id',
            sortOrder: 'desc',
            nowrap: false,
            rownumbers: true,
            border: true,
            striped: true,
            singleSelect: true,
            checkOnSelect: false,
            selectOnCheck: false,
            frozenColumns: [[{            //**_这个就是固定列**_
                field: 'id',
                title: '编号',
                width: 150,
                checkbox: true
            }, {
                field: 'customName',
                title: '姓名',
                width: 100,
                sortable: true,
                formatter: function(value, row) {
                     return "<strong><a style='color:#1E90FF;font-weight:bold' href='#' onclick='doSomething("+row.id+")'>"+value+"</a></strong>";                              
                }
            },{
                field: 'sex',
                title: '性别',
                width: 50,
                sortable: true,
                formatter: function(value, row) {
                    if ("1" == value) return "<strong style='color:blue'>男<strong>";
                    else if ("2" == value) return "<strong style='color:green'>女<strong>";
                }
            }, {
                field: 'mingZu',
                title: '民族',
                width: 60,
                sortable: true
            },  
            {
                field: 'idCard',
                title: '身份证',
                width: 120,
                sortable: true
            }, 
            {
                field: 'customTel',
                title: '联系电话',
                width: 80,
                sortable: true
            }, {
                field: 'cadreState',
                title: '离退休状态',
                width: 70,
                sortable: true,
                formatter: function(value, row) {
                    if(value == 1) return "<strong style='color:#EA7500'>离休</strong>";
                    else if(value ==2) return "<strong style='color:blue'>退休</strong>";                 
                }
            },{
                field: 'retirementDate',
                title: '离退休时间',
                width: 70,
                sortable: true              
            }]],
            columns: [[{
                field: 'auditState',
                title: '审核状态',
                width: 90,
                sortable: true,
                formatter: function(value, row) {
                    if ("1" == value) return "<strong style='color:blue'>未审核<strong>";
                    else if ("2" == value) return "<strong style='color:green'>审核通过<strong>";
                    else if ("3" == value) return "<strong style='color:red'>审核未通过<strong>";
                }
            }, {
                field: 'jianKangZhuangK',
                title: '健康状况',
                width: 90,
                sortable: true
            }, {
                field: 'yangLaoFangShi',
                title: '养老方式',
                width: 130,
                sortable: true
            }]],
            toolbar: '#toolbar',
            onLoadSuccess: function() {
                $(".edit_button").linkbutton({
                    text: '审核',
                    plain: true,
                    iconCls: 'icon-audit16'
                });
                doCellTips(true);
            },
            onRowContextMenu: function(e, rowIndex, rowData) {
                e.preventDefault();
                $(this).datagrid('unselectAll').datagrid('uncheckAll');
                $(this).datagrid('selectRow', rowIndex);
                $('#menu_tools').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        });
    });
qq_23126581
渊渟无迹静涛君 回复Future曙光: easyui? 就是前台加载数据的时候,可以设置你需要的列是固定的。
10 个月之前 回复
qq_44056074
Future曙光 数据是通过一个点击事件,然后利用function searchBtn(){ }这个函数获取的,你的意思是将我图片上的代码放到这里来吗
10 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问