easyui动态设置表头th

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010082526/article/details/87718906

                    <table id="dg" class="easyui-datagrid" data-options="fitColumns: true,">
                        <thead>
                            <tr>
                                <th data-options="field:'year', width: 100,align:'center', sortable: true,">时间</th>
                                <th data-options="field:'city', width: 100,align:'center', sortable: true,">城市</th>
                                <th data-options="field:'population', width: 100,align:'center', sortable: true," id="dr_auth">人口(万)</th>
                                @*<th data-options="field:'PROVINCENAME', width: 100, sortable: true,">省份</th>*@
                            </tr>
                        </thead>
                    </table>

想根据下拉框

                    <th>&nbsp;&nbsp;数据类型：</th>
                    <td>
                        <input id="DataStyle" name="DataStyle" class="easyui-combobox" data-options="valueField:'id',textField:'text',panelHeight:'auto'" style=" width:140px;">
                    </td>

显示id="dr_auth"的内容，试了很多种方式

【1】$('#dg').datagrid("options").columns[0][2]['title'] = "";
$('#dg').datagrid("options").columns[0][2]['title'] = $("#DataStyle").combobox("getText");

【2】

                //$("#th1").text() = "";
                //$("#th1").text() = ("#DataStyle").combobox("getText");

【3】

 $('#th1').attr('text', name);

均失败

只好修改为通过js动态组合需要显示的columns的方式显示表头

[1]

                    <table id="dg" class="easyui-datagrid" data-options="fitColumns: true,">
                        <thead>
                            <tr>
                                <th data-options="field:'year', width: 100,align:'center', sortable: true,">时间</th>
                                <th data-options="field:'city', width: 100,align:'center', sortable: true,">城市</th>
                                <th data-options="field:'population', width: 100,align:'center', sortable: true," id="dr_auth">人口(万)</th>
                                @*<th data-options="field:'PROVINCENAME', width: 100, sortable: true,">省份</th>*@
                            </tr>
                        </thead>
                    </table>

改成<table id="dg"></table>

[2]loadData()方法

        function loadData() {
            var para = serializeObject($('#form_search').form());
            $("#dg").datagrid({
                url: '@Url.Action("LoadData")',
                //method: 'POST',
                queryParams: para,
                fitColumns: true,
                pageSize: 20,
                pageNum: 1,
                //view: nodataview,
                height: '400px',
                fit: true,
                //dataType: 'json',
                columns:[ [
                    { field: 'YEAR', title: '时间', width: 100, sortable: true },
                    { field: 'ALIASNAME', title: '城市', width: 100, sortable: true },
                    { field: 'POPULATION', title: '人口', width: 100, sortable: true }
                ]],
                singleSelect: true,
                pagination: true
            });

        }

[3]查询按钮操作

        $("#btn_search").linkbutton({
            onClick: function () {
                var para = serializeObject($('#form_search').form());
                $.post('@Url.Action("LoadData")', para, function (data) {
                    $("#dg").datagrid('loadData', data);
                }, 'json');
            }
        });

改成

$('#btn_search').click(function () {
            loadData();
            
        });

【同步请求】$(function () {});里面$.ajaxSettings.async = false;//改成同步请求

【查询数据方法】

    function loadData() {
        var para = serializeObject($('#form_search').form());
        var str=getTitle($("#DataStyle").combobox("getText"));
        $("#dg").datagrid({
            url: '@Url.Action("LoadData")',
            //method: 'POST',
            queryParams: para,
            fitColumns: true,
            pageSize: 15,
            pageNum: 1,
            //view: nodataview,
            height: '400px',
            fit: true,
           // dataType: 'json',                
            columns: [[
                { field: 'year', title: '时间', width: 100, sortable: true },
                { field: 'aliasname', title: '城市', width: 100, sortable: true },
                { field: 'num', title: str, width: 100, sortable: true }
            ]],
            singleSelect: true,
            pagination: true,
            onLoadSuccess: function (result) {
                //alert(result.total);
            }
        });

    }

【后台返回结果】

            int page = Convert.ToInt32(Request.Form["page"]);
            int rows = Convert.ToInt32(Request.Form["rows"]);

            var Total = data.Count();
            var Rows = data.OrderBy(u => u.year).Skip((page - 1) * rows).Take(rows);
            return new { DATA = data, total = Total, rows = Rows }.ToJson();
            //return data.ToJson();//不分页的返回结果

【前台页面展示】有返回结果，但是没有显示列表，dg所在div没有定义高度造成的，添加height:400px;

<div style="float: left;width: 100%;">
                    <table id="dg" align="center"></table>
                </div>