boostrap動态更新資料（ztree點選）（webapi資料轉換成Json對象）

先貼個界面，即點選ztree的目錄，然後讓bootstrap更新目錄下的資料（webapi）

先是在剛打開頁面時，加載全部檔案

這是剛開始加載頁面用到的的Js ,初始化ztree和bootstrap

var clickmenu = "";
var oTable;
$(function () {
    oTable = new TableInit();
   
    oTable.Init();
})
var oTableInit = new Object();

var TableInit = function () {
    
    //初始化Table
    oTableInit.Init = function () {
        $('#menuTable').bootstrapTable({
            url: '/menu/text',         //請求背景的URL（*）
            method: 'get',                      //請求方式（*）
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用緩存，預設為true，是以一般情況下需要設定一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//傳遞參數（*）
            sidePagination: "server",           //分頁方式：client用戶端分頁，server服務端分頁（*）
            pageNumber: 1,                       //初始化加載第一頁，預設第一頁
            pageSize: 10,                       //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
            search: true,                       //是否顯示表格搜尋，此搜尋是用戶端搜尋，不會進服務端，是以，個人感覺意義不大
            contentType: "application/x-www-form-urlencoded",
            strictSearch: true,
            showColumns: true,                  //是否顯示所有的列
            showRefresh: true,                  //是否顯示重新整理按鈕
            minimumCountColumns: 2,             //最少允許的列數
            clickToSelect: true,                //是否啟用點選選中行
            height: 700,                        //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度
            uniqueId: "no",                     //每一行的唯一辨別，一般為主鍵列
            showToggle: true,                    //是否顯示詳細視圖和清單視圖的切換按鈕
            cardView: false,                    //是否顯示詳細視圖
            detailView: false,                   //是否顯示父子表
            columns: [
                { field: 'selectItem', radio: true },
            {
                field: 'fileid',
                title: 'ID'
            }, {
                field: 'filename',
                title: '檔案名'
            }, {
                field: 'filetype',
                title: '檔案類型'
            },
            {
                field: 'CreaateData',
                title: '建立時間'
            },
            {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter //自定義方法，添加操作按鈕
            },
            ],
            rowStyle: function (row, index) {
                var classesArr = ['success', 'info'];
                var strclass = "";
                if (index % 2 === 0) {//偶數行
                    strclass = classesArr[0];
                } else {//奇數行
                    strclass = classesArr[1];
                }
                return { classes: strclass };
            },//隔行變色
        });
        //console.log(data);
    };


    //得到查詢的參數
    oTableInit.queryParams = function (params) {
        var temp = {   //這裡的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            limit: params.limit,   //頁面大小
            offset: params.offset,
            menu: clickmenu
        };
        return temp;
    };
    return oTableInit;
};


function operateFormatter(value, row, index) {//賦予的參數
    return [
        '<button class="btn active disabled" id="openfile">打開檔案</button>'

    ].join('');
}



var zTreeObj;
// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）
var setting = {};
// zTree 的資料屬性，深入使用請參考 API 文檔（zTreeNode 節點資料詳解）
//var zNodes = [
//{name:"test1", open:true, children:[
//   {name:"test1_1"}, {name:"test1_2"}]},
//{name:"test2", open:true, children:[
//   {
//       name: "test2_1", children: [
//           { name: "teeee" }, {name:"sfds"}
//       ]
//   }, { name: "test2_2" }]
//}
//];
var setting = {             //這樣設定了，才能用下面那種Json格式
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {   //這是定義開啟click按鈕的
        onClick: onClick
    }
};

2、controller接收請求并且傳回資料

// GET api/menu/
        [Route("menu/ss")]
        public string getztreenode()
        {         
            try
            {
                SqlConnection sqlConnection =
                    new SqlConnection(
                        "Data Source=(local);Initial Catalog=filemaneger;Persist Security Info=True;User ID=sa;Password=123456");
                sqlConnection.Open();
                string sql = "select menuid as id,previousid as pId,Name as name,isParent from menu";
                DataSet dataSet = new DataSet();
                SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sql, sqlConnection);
                sqlDataAdapter.Fill(dataSet);        //将資料填充進dataset 
                
                return JsonConvert.SerializeObject(dataSet);   //将資料轉換成json格式
            }
            catch (Exception ex)
            {
                return ex.ToString();
            }
        }
        /// <summary>
        /// 當menu為空時，即是沒標明目錄，此時查詢全部檔案，當選定時會重新調用這個函數
        /// 這個是用來周遊檔案的函數
        /// </summary>
        /// <param name="limit">一頁顯示的條數</param>
        /// <param name="offset">代表從第幾行資料開始</param>
        /// <param name="menu">表示在目錄中標明的目錄</param>
        /// <returns></returns>
        [Route("menu/text")]
        public IHttpActionResult gettable(int limit, int offset, string menu)
        {
            try
            {
                SqlConnection sqlConnection =
                    new SqlConnection(
                        "Data Source=(local);Initial Catalog=filemaneger;Persist Security Info=True;User ID=sa;Password=123456");
                sqlConnection.Open();
                string sql = "select fileid,filename,filetype,CreateDate from fileall where 1=1 ";
                if (menu != null && menu != "")
                {
                    sql += " and menuid=" + menu;
                }
                DataSet dataSet = new DataSet();
                SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sql, sqlConnection);
                sqlDataAdapter.Fill(dataSet);        //将資料填充進dataset 

                List<table> lt = DataSetToList<table>(dataSet, 0);
                var total = lt.Count;        //總數
                var rows = lt.Skip(offset).Take(limit).ToList();      //分頁存儲到List中
                return Json(new { total = total, rows = rows });
            
            }
            catch (Exception ex)
            {

                return Ok(ex.Message);
            }
                
            
        }

        /// <summary>
        /// DataSetToList
        /// </summary>
        /// <typeparam name="T">轉換類型</typeparam>
        /// <param name="ds">一個DataSet執行個體，也就是資料源</param>
        /// <param name="tableIndext">DataSet容器裡table的下标，隻有用于取得哪個table，也就是需要轉換表的索引</param>
        /// <returns></returns>
        public List<T> DataSetToList<T>(DataSet ds, int tableIndext)
        {
            //确認參數有效
            if (ds == null || ds.Tables.Count <= 0 || tableIndext < 0)
            {
                return null;
            }
            DataTable dt = ds.Tables[tableIndext]; //取得DataSet裡的一個下标為tableIndext的表，然後賦給dt
 
            IList<T> list = new List<T>();  //執行個體化一個list
            // 在這裡寫 擷取T類型的所有公有屬性。 注意這裡僅僅是擷取T類型的公有屬性，不是公有方法，也不是公有字段，當然也不是私有屬性                                               
            PropertyInfo[] tMembersAll = typeof(T).GetProperties();
 
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                //建立泛型對象。為什麼這裡要建立一個泛型對象呢？是因為目前我不确定泛型的類型。
                T t = Activator.CreateInstance<T>();
 
 
                //擷取t對象類型的所有公有屬性。但是我不建議吧這條語句寫在for循環裡，因為沒循環一次就要擷取一次，占用資源，是以建議寫在外面
                //PropertyInfo[] tMembersAll = t.GetType().GetProperties();
 
 
                for (int j = 0; j < dt.Columns.Count; j++) 
                {
                    //周遊tMembersAll
                    foreach (PropertyInfo tMember in tMembersAll)
                    {
                        //取dt表中j列的名字，并把名字轉換成大寫的字母。整條代碼的意思是：如果列名和屬性名稱相同時指派
                        if (dt.Columns[j].ColumnName.ToUpper().Equals(tMember.Name.ToUpper()))
                        {
                            //dt.Rows[i][j]表示取dt表裡的第i行的第j列；DBNull是指資料庫中當一個字段沒有被設定值的時候的值，相當于資料庫中的“空值”。 
                            if (dt.Rows[i][j] != DBNull.Value)
                            {
                                //SetValue是指：将指定屬性設定為指定值。 tMember是T泛型對象t的一個公有成員，整條代碼的意思就是：将dt.Rows[i][j]指派給t對象的tMember成員,參數詳情請參照http://msdn.microsoft.com/zh-cn/library/3z2t396t(v=vs.100).aspx/html
 
                                tMember.SetValue(t, dt.Rows[i][j], null);
 
 
                            }
                            else
                            {
                                tMember.SetValue(t, null, null);
                            }
                            break;//注意這裡的break是寫在if語句裡面的，意思就是說如果列名和屬性名稱相同并且已經指派了，那麼我就跳出foreach循環，進行j+1的下次循環
                        }
                    }
                }
 
                list.Add(t);
            }
            return list.ToList();
 
        }

有些函數是為了轉換json對象格式而弄得

3、點選ztree時，js

//當菜單樹被點選時
function onClick(event, treeId, treeNode, clickFlag) {
    clickmenu = treeNode.id;    //點選的話會擷取到該節點的id号，至于為什麼是這個，你可以用console.log(treeNode)自己看下該對象的值
    var queryData = {};

    queryData['limit'] =10;  //這裡不自己弄的話就把上面那個轉換成全局變量
    queryData['offset'] =0;
    queryData['menu'] =clickmenu;   
    //調用這個函數來進行重新整理資料
    $('#menuTable').bootstrapTable('refresh', queryData);
    //console.log(treeNode);
    
}

4、然後重新整理的話會再調用處理boostrap的controller函數，然後就行啦，不明白的話仔細看下sql語句，是動态指派的

5、忘記說了，需要定義個實體類，原理就是用dataset擷取資料，然後用實體類對應，然後再将其轉換成List存儲，然後再轉換成json對象，然後才傳到bootsrap，下面這個是代碼

public class table
    {
        public string fileid { get; set; }
        public string filename { get; set; }
        public string filetype { get; set; }
        public string path { get; set; }
        public DateTime CreateDate { get; set; }

    }

boostrap動态更新資料（ztree點選）（webapi資料轉換成Json對象）

繼續閱讀

英文月日年日期格式的實作

C# 位元組數組 byte[] 快速比較算法

C# 位元組數組、字元串轉化位元組數組轉字元串字元串轉位元組數組位元組數組轉整數整數轉位元組數組字元串轉位元組字元串轉數值數值轉字元串

C#用Zlib壓縮或解壓縮位元組數組

C# 比較兩個位元組數組是否相等

關于 underscore 中模闆引擎的應用示例

對于VS中scanf報錯永久解決，建立源檔案自動添加#define _CRT_SECURE_NO_WARNINGS 1

《C#進階程式設計》讀書筆記 -索引

CQ V1.0分詞bates(基于雙數組tire樹)—應該是目前最快的中文分詞算法

C#多線程——前台線程和背景線程

【JavaScript文法】函數對象的淺拷貝、深拷貝

JS--運算符

數組和類數組

C#+ArcEngine代碼檢測ArcEngine Runtime是否安裝以及是否授權

七牛雲-C#SDK-上傳-前期準備

jquery_126_demo