Jqgrid + ztree + echarts and jqgridztree

Jqgrid + ztree + echarts and jqgridztree

As a beginner at the web Front-end, today I want to record the use of the three controls, namely the table control jqgrid, the tree control ztree, And the chart control echarts. The descriptions are as follows.

1. jqgrid

First, go to the official demo website. http://blog.mn886.net/jqgrid/and the website is helpful.

The addition of jqgrid is relatively simple, that is, after downloading the js file and css file are placed under the corresponding directory respectively.

<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>

You can reference them from the relevant directories.
The following describes a simple instance and describes the parameter settings.

<Script type = "text/javascript"> $ (document ). ready (function () {$ ("# list4 "). jqGrid ({url: "data. json ", datatype:" json ", // data source, local data mtype:" POST ", // submit method width: 1000, height: 700, // height, table height. Value, percentage, or 'auto' colNames: ['customer id', 'Company name', 'phone', 'city'], colModel: [{Name: 'mermerid ', width: '20180101', align: 'center'}, {name: 'companyname', width: '20180101', align: 'center'}, {name: 'phone ', width: '20180101', align: "center"}, {name: 'city', width: '20180101', align: "center"}], rownumbers: true, // Add the row number on the left // altRows: true, // set it to an alternate row table. The default value is falsesortname: 'mermerid', sortorder: 'asc ', viewrecords: true, // whether to display the total number of records in the browser navigation bar ro WNum: 15, // number of records displayed on each page rowList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // array of elements used to change the drop-down list box for displaying the number of rows. JsonReader: {id: "blackId", // In the returned parameters, the table ID is named blackIdrepeatitems: false}, autoScroll: "false", emptyrecords: "Nothing to display ", // prompt celledit: "true" when the cell is empty, // start the cell editing function pager: $ ('# gridPager ')}); // navgrid is used to set toolbar $ ("# list4 "). navGrid ('# gridPager', {edit: true, add: true, del: true, search: true, refresh: true, view: true, poition: "left", cloneToTop: false}) ;}); </script>

There are two main problems: one is about page layout, that is, weight and height are often unable to constrain this table, and there are unknown lines, at the same time, the use of the scroll bar is also quite strange. The second problem is the browsing navigation bar, which cannot be adjusted together with the layout of the table. It is often caused by the running and display only local issues.

Solved the problem of displaying two horizontal scroll bars.

<! -- This line of code is used to solve the problem of two horizontal scroll bars --> $ ("# jqGrid "). closest (". ui-jqgrid-bdiv ").css ({" overflow-x ":" hidden "});

Ideally, I want to achieve this result by having a navigation bar on a table and below.

Of course, the implementation code is attached first.

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: 'mermerid', 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 editable22}, 23 {24 label: 'phone', 25 name: 'phone', 26 width: 140,27 editable: true28}, 29 {30 label: 'postal Code', 31 name: 'postalcode', 32 width: editable: true34}, 35 {36 label: 'city', 37 name: 'city', 38 width: editable: true40} 41], 42 sortname: 'custom' Erid', 43 sortorder: 'asc ', 44 loadonce: true, 45 viewrecords: true, 46 height: "auto", 47 weight: "auto", 48 rowNum: 10, 49 pager: "# jqGridPager", 50 51}); 52 <! -- This line of code is used to solve the problem of two horizontal scroll bars --> 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 grid57 {edit: true, add: true, del: true, search: false, refresh: false, view: false, 58 position: "left", cloneToTop: false}, 59 // options for the Edit Dialog60 {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. responseText68} 69}, 70 // options for the Add Dialog71 {72 closeAfterAdd: true, 73 recreateForm: true, 74 errorTextFormat: function (data) {75 return 'error: '+ data. responseText76} 77}, 78 // options for the Delete Dailog79 {80 errorTextFormat: function (data) {81 return 'error: '+ data. responseText82} 83}); 84}); 85 </script>

The content of navGrid is not too easy to understand. We will make a new summary next week.

In addition, the data format json is used to control the time and the id control with the same name in json.

Let's talk about jqgrid first. With a new understanding, let's talk about it.

2. ztree

Add the official address http://www.treejs.cn/v3/demo.php?_102.

The reference method is still like this

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

Attach a simple tree to give a chestnut

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

The tree structure is represented by creating a new node under the parent node. Set setting and znodes respectively at the beginning, and then use the initialization function init to put setting and znodes as initialization parameters for initialization.

There are two main problems to be solved: one is that the tree structure is gone, and all the text appears in the same column without indentation. Second, how to reference json data for control rather than direct input. Solved the problem and then added the po.

Let's talk about the other two. One is that the tree-like adjustment is stored in the demo.css file. There is a ztreedemo option in it. Change it to the name you want, and use the class in <ul> to reference it.

The second is the style of the entire tree, that is, you can modify the tag in ademo.

The third is echarts. Frankly speaking, this plug-in is the most popular among the three.

Add the official website address http://echarts.baidu.com /.
To reference this plug-in, you only need

<! -- Introduce echarts. js --> <script src = "js/echarts. min. js"> </script>

You can.

First, attach the simplest implementation.

1 <script type = "text/javascript"> 2 // initialize the echarts instance 3 var myChart = echarts Based on the prepared dom. init (document. getElementById ('cdatatablequery2 '); 4 5 // specify the chart configuration items and data 6 var option = {7 title: {8 text: 'chart display '9}, 10 tooltip: {}, 11 legend: {12 data: ['number'] 13}, 14 xAxis: {15 data: ["Settlement point", "Culvert", "hydrological hole ", "Weather", "Groundwater", "bad road section"] 16}, 17 yAxis :{}, 18 series: [{19 name: 'number', 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 // use the specified configuration item and data to display the chart. 39 myChart. setOption (option); 40 </script>

If you do not want to explain anything else, we will introduce how to use color changes, that is, itemstyle-> normal-> color, and then set a colorList to put the color list order in it, then the color is displayed in the chart in sequence. But I have no js skills. I will study other functions in detail.

17:27:09