easyui datagrid動態繫結列名和資料

阿新 • • 發佈：2019-01-16

ashx檔案內容

public void ProcessRequest(HttpContext context)
    {//示例用，各位可以根據自己需求寫  

        var id = context.Request["id"];
        if (id.ToString().Equals("1"))
        {
            DataTable dt = createTable();

            DataRow dr = dt.NewRow();
            dr["field"] = "building_id";
            dr["title"] = "公寓編號";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["field"] = "building_name";
            dr["title"] = "公寓名稱";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["field"] = "building_info";
            dr["title"] = "公寓資訊";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["field"] = "school_area";
            dr["title"] = "所在校區";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            //string sql = "select building_id,building_name,building_info,school_area from building";
            //string countsql = "select count(*) from building";
            //int count = DBHelper.GetScalar(countsql);
            //DataTable dtt = DBHelper.GetDataSet(sql);

            DataTable dtt = new DataTable();
            dtt.Columns.Add("building_id");
            dtt.Columns.Add("building_name");
            dtt.Columns.Add("building_info");
            dtt.Columns.Add("school_area");
            DataRow drTemp;
            for (int i = 0; i < 10; i++)
            {
                drTemp = dtt.NewRow();
                drTemp["building_id"] = "A" + i.ToString();
                drTemp["building_name"] = "A" + i.ToString() + "號樓";
                drTemp["building_info"] = "A" + i.ToString() + "公寓";
                drTemp["school_area"] = "A" + i.ToString() + "小營";
                dtt.Rows.Add(drTemp);
            }
            int count = dtt.Rows.Count;
            Hashtable ht = new Hashtable();
            ht.Add("total", count);
            ht.Add("columns", dt);
            ht.Add("rows", dtt);
            string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht);


            context.Response.Clear();
            context.Response.ContentEncoding = Encoding.UTF8;
            context.Response.ContentType = "application/json";
            context.Response.Write(strJson);
            context.Response.Flush();
            context.Response.End();
        }
        else
        {
            DataTable dt = createTable();

            DataRow dr = dt.NewRow();
            dr["field"] = "building_id";
            dr["title"] = "公寓編號";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["field"] = "building_name";
            dr["title"] = "公寓名稱";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["field"] = "school_area";
            dr["title"] = "所在校區";
            dr["align"] = "center";
            dr["width"] = 100;
            dt.Rows.Add(dr);

            //string sql = "select building_id,building_name,school_area from building";
            //string countsql = "select count(*) from building";
            //int count = DBHelper.GetScalar(countsql);
            //DataTable dtt = DBHelper.GetDataSet(sql);
            DataTable dtt = new DataTable();
            dtt.Columns.Add("building_id");
            dtt.Columns.Add("building_name");
            dtt.Columns.Add("building_info");
            dtt.Columns.Add("school_area");
            DataRow drTemp;
            for (int i = 0; i < 10; i++)
            {
                drTemp = dtt.NewRow();
                drTemp["building_id"] = "B" + i.ToString();
                drTemp["building_name"] ="B"+ i.ToString() + "號樓";
                drTemp["building_info"] = "B"+i.ToString() + "公寓";
                drTemp["school_area"] = "B"+i.ToString() + "小營";
                dtt.Rows.Add(drTemp);

            }
            int count = dtt.Rows.Count;


            Hashtable ht = new Hashtable();
            ht.Add("total", count);
            ht.Add("columns", dt);
            ht.Add("rows", dtt);
            string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht);


            context.Response.Clear();
            context.Response.ContentEncoding = Encoding.UTF8;
            context.Response.ContentType = "application/json";
            context.Response.Write(strJson);
            context.Response.Flush();
            context.Response.End();
        }

    }

    public DataTable createTable()
    {

        DataTable dt = new DataTable("myTable");

        //field列  
        DataColumn columnField = new DataColumn();//建立一列  
        columnField.DataType = System.Type.GetType("System.String");//資料型別  
        columnField.ColumnName = "field";//列名  
        dt.Columns.Add(columnField);//新增到table  
        //title列  
        DataColumn columnTitle = new DataColumn();
        columnTitle.DataType = System.Type.GetType("System.String");
        columnTitle.ColumnName = "title";
        dt.Columns.Add(columnTitle);
        //align列  
        DataColumn columnAlign = new DataColumn();
        columnAlign.DataType = System.Type.GetType("System.String");
        columnAlign.ColumnName = "align";
        dt.Columns.Add(columnAlign);
        //width列  
        DataColumn columnWidth = new DataColumn();
        columnWidth.DataType = System.Type.GetType("System.Int32");
        columnWidth.ColumnName = "width";
        dt.Columns.Add(columnWidth);

        return dt;
    }  
 
    public bool IsReusable {
        get {
            return false;
        }
    }

前臺

<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DataGrid動態生成列</title>
    <link id="Link1" rel="stylesheet" href="../jQEasyUI/jquery-easyui-1.4.2/themes/default/easyui.css"
        type="text/css" />
    <link rel="stylesheet" href="../jQEasyUI/jquery-easyui-1.4.2/themes/icon.css" type="text/css" />
    <script type="text/javascript" src="../jQEasyUI/jquery-easyui-1.4.2/jquery.min.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="../jQEasyUI/jquery-easyui-1.4.2/jquery.easyui.min.js"
        charset="utf-8"></script>

    <script type="text/javascript">
        var grid;

        $(function () {

            grid = $('#tt').datagrid({
                fit: true,//自動大小    
                rownumbers: true,//行號   
                loadMsg: '資料裝載中......',
                singleSelect: true,//單行選取  
                pagination: false,//顯示分頁  
                //height:500px,
                //width:1000px,
                toolbar: '#tabs',
                columns: [[]],
                toolbar: [{
                    text: '顯示1',
                    iconCls: 'icon-add',
                    handler: newData
                }, '-', {
                    text: '顯示2',
                    iconCls: 'icon-add',
                    handler: newData2
                }]
            });

            //  self.parent.$("#tabs").tabs("loaded");
        });

        function newData() {

            $.post('Test.ashx', { id: 1 },
                function (data) {
                    grid.datagrid({
                        columns: [data.columns]
                    }).datagrid("loadData", data);
                }, 'json');
        }

        function newData2() {

            $.post('Test.ashx', { id: 2 },
                function (data) {
                    grid.datagrid({
                        columns: [data.columns]
                    }).datagrid("loadData", data);
                }, 'json');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 1000px">
            <table id="tt" style="height: 535px">
            </table>
        </div>
    </form>
</body>
</html>

easyui datagrid動態繫結列名和資料

ashx檔案內容 public void ProcessRequest(HttpContext context) {//示例用，各位可以根據自己需求寫 var id = context.Request["id"]; if (id

easyui中datagrid動態繫結json載入列的解決方案

在做專案中有這樣一個問題：在前臺輸入sql語句，傳入後臺後獲得資料，將資料繫結在datagrid上顯示。這個問題困擾我很久，因為如果是傳入sql語句的話，很難確定是哪個表，也不好確定到底有多少列，所以無法使用實體類來獲得資料，解析sql語句的話……..太

python3面向物件靜態方法 / 類方法 / 屬性方法 / 例項動態繫結屬性和方法 / 類動態繫結屬性和方法

0.普通方法普通方法訪問類屬性：self.__class__.類屬性名稱 class Test(object): n = 123 def __init__(self, n): self.n = n def tell(self):

Jquery動態繫結html5 datalist資料

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>表單

給id屬性用v-bind動態繫結物件和字串

class和id 動態的繫結一個字串達到自定義名稱的方法：:class="'字串'+item.value" :id="'字串'+item.value" <!DOCTYPE html> <html> <head> <meta c

Vue實戰--v-bind以及動態繫結Class和style

v-bind通常用來繫結屬性的，格式是v-bind：屬性名 = "值"，簡寫:屬性名 = "值" 之前我們知道v-bind主要就是動態更新DOM的屬性的，class作為DOM的屬性當然也不例外，那麼v-bind怎麼動態更新class呢，分為三種方法:物件語法和陣列語法，還

第十一節：動態繫結class和style

在第六節的章節中，我們學會了如何給檢視上的html標籤繫結屬性。比如，給 <a> 標籤繫結href屬性，簡單回憶一下：<a v-bind:href="link"></a><!-- v-bi

easyUI-combobox 動態繫結資料來源

前臺 <link rel="stylesheet" type="text/css" href="../css/easyui.css"/> <script type="text/javascript" src="../js/jquery-1.7.1.mi

Easyui datagrid 繫結本地Json資料

var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"檢測裝置","sortid":3,"valid":"1","handler":"系統管理員"}]}';var data = $.parseJSON(jsonstr); $

Easyui combobox下拉框動態繫結資料

easyui-combobox根據資料庫查詢繫結資料，如下： 1、html <select id="st_cmpy" editable="false" class="easyui-comb

bootstrap-select下拉框模糊搜尋和動態繫結資料

前言今天做專案的時候，需要對下拉框做一個模糊搜尋，就想到了bootstrap-select外掛，在運用中遇到的問題進行總結下。引入引入bootstrap和bootstrap-select檔案 <link rel="stylesheet

Easyui 下拉列表動態繫結資料 C#

前端程式碼： <input id="ipt_typeName" name="ipt_typeName"/> js： $('#ipt_typeName').combobo

C#利用Lambda和Expression實現資料的動態繫結

在程式開發過程中，有時為了讓資料能夠實時更新，我們會採用資料繫結來實現。一般我們資料繫結時我們是這樣寫的 public class Helper : INotifyPropertyChanged { #region statusI

HighChat動態繫結資料資料後臺繫結（四）

後臺繫結資料，直接返回json資料 IList<SummaryHour> adHourData = summarybll.FindList(str); List<int> Hour = new List<int>() { 0, 1,

JQuery Ajax實現Select多級關聯動態繫結資料

關於JQuery選擇外掛的使用在這裡有些心得和大家分享一下，希望能幫到大家。 jQuery選擇外掛分為基本版和美化版，重點說下美化版，如下圖所示：相比最原始的版本，美化後的選擇外掛可以說是很漂亮了且功

vue動態繫結class的3種方式物件語法和陣列語法

動態繫結class的幾種方式 1.物件語法行內或計算屬性 <style> .static { width: 100px; height: 100px; background-color: #ccc; } .orange {

Java靜態繫結和動態繫結

Java靜態繫結和動態繫結靜態繫結動態繫結將方法呼叫連線到方法體稱為繫結。也就是通過呼叫方法連線到具體的方法體。 Java兩種繫結模式首先了解一下變數和型別每個基本變數都會有個型別 int a =1;double b =

動態繫結(遲繫結或者多型)和抽象類

package jave; /*多型的三個條件 * 1 要有繼承; * 2 要有方法的重寫; * 3 父類引用指向子類的引用物件 */ /*動態繫結(遲繫結或者多型)--在執行期間(而非編譯期間)判斷引用物件的實際型別,根據其實際型別呼叫其相應的方法*/ abstra

C++ 動態繫結和靜態繫結

virtual 函式實現多型性 #include <iostream> using namespace std; struct TreeNode { TreeNode *left; TreeNode *rignt; }; class Gener

jQuery easyui dataGrid 動態改變排序欄位名，一般情況下，在使用的時候，我們會點選相應欄位進行排序，這裡以JAVA為例，後端的實體類欄位有可能和資料庫的欄位不一致；如：實體類中的

jQuery easyui dataGrid 動態改變排序欄位名，一般情況下，在使用的時候，我們會點選相應欄位進行排序，這裡以JAVA為例，後端的實體類欄位有可能和資料庫的欄位不一致；如：實體類中的屬性為userName,前臺filed="userName"而資料庫的欄位

easyui datagrid動態繫結列名和資料

相關推薦