EasyUI 动态生成列加分页

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
<!--禁用缓存部分结束-->
     <script src="/Scripts/easyui/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  <link id="easyuiTheme" href="/Scripts/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/ERP.js" type="text/javascript"></script>
    <link href="/Styles/ERP.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script src="/Scripts/import.js"></script>
    <script src="Common.js"></script>
</head>

    

        <script type="text/javascript">
        

        //查询方法  
        function query() {
            var begindate = $("#txt_intimeFrom").datebox('getValue');
            var enddate = $("#txt_intimeTo").datebox('getValue');
            if (begindate == '')
            {
                parent.$.messager.alert('提示', '请选择开始日期', 'warning');
                return;
            }
            if (enddate == '') {
                parent.$.messager.alert('提示', '请选择结束日期', 'warning');
                return;
            }
            var days = DATEDIFF(begindate, enddate)
            if (days > 365)
            {
                parent.$.messager.alert('提示', '查询日期范围不能超过365天', 'warning');
                return;
            }
          var   queryData = {
              productCode: $("#txt_ProductCode").combobox("getText"),
                productBrand: $("#ddl_ProductBrand").combotree('getValue'),
                productType: $("#ddl_ProductType").combotree('getValue'),
                country: $("#hid_Countries").val(),// $("#ddl_County").combobox('getValue');           
                province: $("#hid_Provinces").val(),// $("#ddl_Province option:selected").val();//.combobox('getValue');
                city: $("#hid_City").val(),// $("#ddl_City option:selected").val();//.combobox('getValue');
                customerType: $("#ddl_CustomerType").combobox('getValue'),
                customerTrade: $("#ddl_CustomerIndustry").combobox('getValue'),
                saleTeam: $("#ddl_SaleTeam").combobox('getValue'),
                saler: $("#ddl_Sales").combobox('getText'),
                fristTradeTimeFrom: $("#txt_FristTradeTimeFrom").datebox('getValue'),
                fristTradeTimeTo: $("#txt_FristTradeTimeTo").datebox('getValue'),
               byType: $("#rad_QianDan").is(":checked") == true ? "1" : "2",
               
                intimeFrom: $("#txt_intimeFrom").datebox('getValue'),
                intimeTo: $("#txt_intimeTo").datebox('getValue'),
                salegroup: $("#rad_group").is(":checked") == true ? "1" : "2",
                pageNumber: $('#hid_pageNumber').val(),
                pageSize: $('#hid_pageSize').val(),
                
            };


            $.ajax({
                type: "POST",
                async: false,  // 设置同步方式
                cache: false,
                dataType: "text",
                url: "SaleOrderReport.aspx?action=Serach",
                data: queryData,
                success: function (result) {
                    var data = eval('(' + result + ')');
                    showGrid(eval(data));

                }
                , error: function () {

                    $.messager.alert("错误", "出错了!", "info", null);
                }
            });
        }
      
     

    </script>
<body class="easyui-layout" data-options="fit:true,border:false">

<div data-options="region:'center',fit:true,border:false">
		<table id="rainGrid" data-options="fit:true,border:false"></table>
	</div>
    <input type="hidden" id="hid_pageNumber"   value="1"/>
    <input type="hidden" id="hid_pageSize"  value="100" />
        
    
</body>
</html>

  

 showGrid({});//第一次调用
//处理返回结果,并显示数据表格  
function showGrid(data) {

    var options = {
         "auto",
        height: "auto",
        rownumbers: true,
       pagination: true,
        toolbar: '#toolbar',
        singleSelect: true

    };

    
    options.columns = eval(data.columns);//把返回的数组字符串转为对象,并赋于datagrid的column属性  
    var dataGrid = $("#rainGrid");
    dataGrid.datagrid(options);//根据配置选项,生成datagrid  
  
        dataGrid.datagrid("loadData", data.data[0].rows); //载入本地json格式的数据  

        var p = dataGrid.datagrid('getPager');
        $(p).pagination({
            total: data.data[0].total,
            pageNumber:data.data[0].page,
            pageSize: 100,//每页显示的记录条数,默认为10  
            pageList: [100, 500, 1000],//可以设置每页记录条数的列表  
            beforePageText: '第',//页数文本框前显示的汉字  
            afterPageText: '页    共 {pages} 页',
            displayMsg: '显示 {from} 到 {to}    共 {total} 条记录'
           ,onSelectPage:function(pageNumber, pageSize){
               $(this).pagination('loading');
               $('#hid_pageNumber').val(pageNumber);
               $('#hid_pageSize').val(pageSize);
               $(this).pagination('loaded');
                query();
            
           
        }

        });

       
        dataGrid.datagrid('clearSelections');

      
    }
    
}

  

//生成Json
public string CreateDataGridColumnModel(DataTable dt, int total, int pageindex)
        {
            StringBuilder columns = new StringBuilder("{ 'columns':[[");
            int width = 85;
            foreach (DataColumn col in dt.Columns)
            {
                //控制列的宽度 第一列日期宽度为139,其余列为列名的汉字长度*20px  
                if (col.ColumnName == "销售")
                {
                    width = 100;
                }
                else
                {
                    width = 83;
                }

                columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',{2}}},", col.ColumnName, col.ColumnName, width);
            }
            if (dt.Columns.Count > 0)
            {
                columns.Remove(columns.Length - 1, 1);//去除多余的','号  
            }

            columns.Append("]],data:[{");

            columns.Append(""rows":[ ");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                columns.Append("{ ");

                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    if (j < dt.Columns.Count - 1)
                    {
                        columns.Append(""" + dt.Columns[j].ColumnName.ToString().ToLower() + "":" + """ + JsonCharFilter(dt.Rows[i][j].ToString()) + "",");

                    }
                    else if (j == dt.Columns.Count - 1)
                    {
                        columns.Append(""" + dt.Columns[j].ColumnName.ToString().ToLower() + "":" + """ + JsonCharFilter(dt.Rows[i][j].ToString()) + """);
                    }
                }
                if (i == dt.Rows.Count - 1)
                {
                    columns.Append("} ");
                }
                else
                {
                    columns.Append("}, ");
                }
            }
            columns.Append("]");

            columns.Append(",");

            columns.Append(""total":");
            columns.Append(total);
            columns.Append(",");
            columns.Append(""page":");
            columns.Append(pageindex);
            columns.Append("}");
            columns.Append("]");

            columns.Append("}");
            return columns.ToString();

        }

  

原文地址:https://www.cnblogs.com/zhang9418hn/p/3934389.html