首页 > > 网页制作 > css >

web前端开发控件学习笔记之jqgrid+ztree+echarts

2018-06-24 00:31:17来源：未知阅读 ()

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