web前端開發控制項學習筆記之jqgrid+ztree+echarts

作為web前端初學者，今天要記錄的是三個控制項的使用心得，分別是表格控制項jqgrid，樹形控制項ztree，圖表控制項echarts。下邊分別進行描述。 1.jqgrid 首先放官方demo網站上來，http://blog.mn886.net/jqGrid/，上面的描述還是挺有幫助的。 jqgrid的添加 ...

作為web前端初學者，今天要記錄的是三個控制項的使用心得，分別是表格控制項jqgrid，樹形控制項ztree，圖表控制項echarts。下邊分別進行描述。

1.jqgrid

首先放官方demo網站上來，http://blog.mn886.net/jqGrid/，上面的描述還是挺有幫助的。

jqgrid的添加是比較簡單的，就是下載好之後將js文件和css文件分別放在相應的目錄下，在使用時按照

<link rel="stylesheet" type="text/css"  media="screen"
      href="style/ui.gqgrid-bootstrap.css"/>

<script src="js\grid.locale-en.js" type="text/javascript"></script>


分別從相關目錄下引用就可以了。
下邊介紹一個簡單的實例並且說下其中參數的設置

<script type="text/javascript">
$(document).ready(function(){
$("#list4").jqGrid({
url:"data.json",
datatype:"json", //數據來源，本地數據
mtype:"POST",//提交方式
width:1000,
height:700,//高度，表格高度。可為數值、百分比或'auto'
colNames:['Customer ID', 'Company Name', 'Phone','City'],
colModel:[
{name:'CustomerID', width:'20%',align:'center' },
{name:'CompanyName', width:'15%',align:'center'},
{name:'Phone', width:'20%', align:"center"},
{name:'City', width:'35%', align:"center" }
],
rownumbers:true,//添加左側行號
//altRows:true,//設置為交替行表格,預設為false
sortname:'CustomerID',
sortorder:'asc',
viewrecords: true,//是否在瀏覽導航欄顯示記錄總數
rowNum:15,//每頁顯示記錄數
rowList:[1,2,3,4,5,6,7,8,9,10,10],//用於改變顯示行數的下拉列表框的元素數組。
jsonReader:{
id: "blackId",//設置返回參數中，表格ID的名字為blackId
repeatitems : false
},

autoScroll:"false",
emptyrecords: "Nothing to display",//單元格為空時的提示
celledit:"true",//啟動單元格編輯功能
pager:$('#gridPager')
});
//navgrid用於設置toolbar
$("#list4").navGrid('#gridPager',
{
edit:true,add:true,del:true,search:true,refresh:true,
view:true,poition:"left",cloneToTop:false
}
);
});
</script>

現在存在的問題主要是兩個，一個是關於頁面佈局的問題，就是weight和height經常無法約束這個表格，還有不明所以的線出現，同時滾動條的使用也比較奇怪，第二個就是瀏覽導航欄的問題，無法和表格的佈局調整到一起，經常出現亂跑和只顯示局部的問題。

解決了一個顯示兩個橫向滾動條的問題

<!--此行代碼用來解決有兩個橫向滾動條的問題  -->
  $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });

　　合適的圖表情況理想狀態下我想達到的效果就是這樣有表格和下邊的導航條



當然也先附上實現上圖的代碼

 1             <script type="text/javascript">
 2                 $(document).ready(function () {
 3                     $("#jqGrid").jqGrid({
 4                         url: 'data.json',
 5                         // we set the changes to be made at client side using predefined word clientArray
 6                         editurl: 'clientArray',
 7                         datatype: "json",
 8                         colModel: [
 9                             {
10                                 label: 'Customer ID',
11                                 name: 'CustomerID',
12                                 width: 90,
13                                 key: true,
14                                 editable: true,
15                                 editrules : { required: true}
16                             },
17                             {
18                                 label: 'Company Name',
19                                 name: 'CompanyName',
20                                 width: 160,
21                                 editable: true // must set editable to true if you want to make the field editable
22                             },
23                             {
24                                 label : 'Phone',
25                                 name: 'Phone',
26                                 width: 140,
27                                 editable: true
28                             },
29                             {
30                                 label: 'Postal Code',
31                                 name: 'PostalCode',
32                                 width: 100,
33                                 editable: true
34                             },
35                             {
36                                 label: 'City',
37                                 name: 'City',
38                                 width: 140,
39                                 editable: true
40                             }
41                         ],
42                         sortname: 'CustomerID',
43                         sortorder : 'asc',
44                         loadonce: true,
45                         viewrecords: true,
46                         height: "auto",
47                         weight:"auto",
48                         rowNum: 10,
49                         pager: "#jqGridPager",
50 
51                 });
52                     <!--此行代碼用來解決有兩個橫向滾動條的問題  -->
53                     $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
54 
55                     $('#jqGrid').navGrid('#jqGridPager',
56                             // the buttons to appear on the toolbar of the grid
57                             { edit: true, add: true, del: true, search: false, refresh: false, view: false,
58                                 position: "left", cloneToTop: false },
59                             // options for the Edit Dialog
60                             {
61                                 editCaption: "The Edit Dialog",
62                                 recreateForm: true,
63                                 checkOnUpdate : true,
64                                 checkOnSubmit : true,
65                                 closeAfterEdit: true,
66                                 errorTextFormat: function (data) {
67                                     return 'Error: ' + data.responseText
68                                 }
69                             },
70                             // options for the Add Dialog
71                             {
72                                 closeAfterAdd: true,
73                                 recreateForm: true,
74                                 errorTextFormat: function (data) {
75                                     return 'Error: ' + data.responseText
76                                 }
77                             },
78                             // options for the Delete Dailog
79                             {
80                                 errorTextFormat: function (data) {
81                                     return 'Error: ' + data.responseText
82                                 }
83                             });
84                 });
85             </script>

關於navGrid的內容目前還不是太理解，等下周在做新的總結。

還有的就是用的數據格式json，控制時用和json中同名的的id控制。

jqgrid先說到這裡吧，有了新的理解再說。

2、ztree

還是先附上官方地址：http://www.treejs.cn/v3/demo.php#_102。

引用方式還是這樣

1   <link rel="stylesheet" href="styles/demo.css" type="text/css">
2     <link rel="stylesheet" href="styles/zTreeStyle.css" type="text/css">
3     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
4     <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

View Code

先附上一個最簡單的樹來舉個慄子

 1 <SCRIPT type="text/javascript">
 2         <!--
 3         var setting = {    };
 4 
 5         var zNodes =[
 6             { name:"父節點1 - 展開", open:true,
 7                 children: [
 8                     { name:"父節點11 - 摺疊",
 9                         children: [
10                             { name:"葉子節點111"},
11                             { name:"葉子節點112"},
12                             { name:"葉子節點113"},
13                             { name:"葉子節點114"}
14                         ]},
15                     { name:"父節點12 - 摺疊",
16                         children: [
17                             { name:"葉子節點121"},
18                             { name:"葉子節點122"},
19                             { name:"葉子節點123"},
20                             { name:"葉子節點124"}
21                         ]},
22                     { name:"父節點13 - 沒有子節點", isParent:true}
23                 ]},
24             { name:"父節點2 - 摺疊",
25                 children: [
26                     { name:"父節點21 - 展開", open:true,
27                         children: [
28                             { name:"葉子節點211"},
29                             { name:"葉子節點212"},
30                             { name:"葉子節點213"},
31                             { name:"葉子節點214"}
32                         ]},
33                     { name:"父節點22 - 摺疊",
34                         children: [
35                             { name:"葉子節點221"},
36                             { name:"葉子節點222"},
37                             { name:"葉子節點223"},
38                             { name:"葉子節點224"}
39                         ]},
40                     { name:"父節點23 - 摺疊",
41                         children: [
42                             { name:"葉子節點231"},
43                             { name:"葉子節點232"},
44                             { name:"葉子節點233"},
45                             { name:"葉子節點234"}
46                         ]}
47                 ]},
48             { name:"父節點3 - 沒有子節點", isParent:true}
49 
50         ];
51 
52         $(document).ready(function(){
53             $.fn.zTree.init($("#treeDemo"), setting, zNodes);
54         });
55         //-->
56     </SCRIPT>

就是通過父節點下建立新節點來表示樹形結構。先在開始分別設置setting和znodes，然後用初始化函數init，將setting和znodes作為初始化參數放進去進行初始化。

現在需要解決的問題主要有兩個，一是樹形結構沒了，所有的文字出現在了同一列，沒有了縮進。二是如何引用json數據來控制而不是直接輸入。解決了再po上來。

再說兩個其他的，一是樹的樣式調整的位置是在demo.css文件里，裡邊有一項ztreedemo的選項，將他改為自己要用的名字，同時在<ul>里用class來引用就可以了。

第二個是整個樹的樣式，就是修改ademo中的a標簽就可以了。

第三個是echarts，坦白講這個插件是這三個中使用最爽的了。

先附上官網地址：http://echarts.baidu.com/。
引用這個插件只需要

<script src="js/echarts.min.js"></script>

就可以了。

先附上最簡單的實現。

 1               <script type="text/javascript">
 2                   // 基於準備好的dom，初始化echarts實例
 3                   var myChart = echarts.init(document.getElementById('cdataTableQuery2'));
 4 
 5                   // 指定圖表的配置項和數據
 6                   var option = {
 7                       title: {
 8                           text: '圖表展示'
 9                       },
10                       tooltip: {},
11                       legend: {
12                           data:['數目']
13                       },
14                       xAxis: {
15                           data: ["沉降點","涵洞","水文孔","天氣","地下水","不良路段"]
16                       },
17                       yAxis: {},
18                       series: [{
19                           name: '數目',
20                           itemStyle:{
21                               normal:{
22                                   color: function(params) {
23                                       // build a color map as your need.
24                                       var colorList = [
25                                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
26                                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
27                                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
28                                       ];
29                                       return colorList[params.dataIndex]
30                                   },
31                               }
32                           },
33                           type: 'bar',
34                           data: [5, 35, 36, 20, 88, 99]
35                       }]
36                   };
37 
38                   // 使用剛指定的配置項和數據顯示圖表。
39                   myChart.setOption(option);
40               </script>

其他的不解釋，介紹一下顏色變化的使用方法，就是itemstyle->normal->color,然後設置一個colorList，將顏色列表順序放入其中，然後顏色就會按順序顯示在圖表中。but我js沒什麼水平，研究通透再談詳細的其他功能。

2016/10/16 17:27:09