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

作为web前端初学者，今天要记录的是三个控件的使用心得，分别是表格控件jqgrid，树形控件ztree，图表控件echarts。下边分别进行描述。

1.jqgrid

首先放官方demo网站上来，http://blog.mn886.net/jqGrid/，上面的描述还是挺有帮助的。

jqgrid的添加是比较简单的，就是下载好之后将js文件和css文件分别放在相应的目录下，在使用时按照

      href="style/ui.gqgrid-bootstrap.css"/>

分别从相关目录下引用就可以了。
下边介绍一个简单的实例并且说下其中参数的设置

现在存在的问题主要是两个，一个是关于页面布局的问题，就是weight和height经常无法约束这个表格，还有不明所以的线出现，同时滚动条的使用也比较奇怪，第二个就是浏览导航栏的问题，无法和表格的布局 调整到一起，经常出现乱跑和只显示局部的问题。

解决了一个显示两个横向滚动条的问题

  $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });

　　理想状态下我想达到的效果就是这样有表格和下边的导航条

当然也先附上实现上图的代码

 1             

关于navGrid的内容目前还不是太理解，等下周在做新的总结。

还有的就是用的数据格式json，控制时用和json中同名的的id控制。

jqgrid先说到这里吧，有了新的理解再说。

2、ztree

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

引用方式还是这样

1   2     3     4     

View Code

先附上一个最简单的树来举个栗子

 1 

就是通过父节点下建立新节点来表示树形结构。先在开始分别设置setting和znodes，然后用初始化函数init，将setting和znodes作为初始化参数放进去进行初始化。

现在需要解决的问题主要有两个，一是树形结构没了，所有的文字出现在了同一列，没有了缩进。二是如何引用json数据来控制而不是直接输入。解决了再po上来。

再说两个其他的，一是树的样式调整的位置是在demo.css文件里，里边有一项ztreedemo的选项，将他改为自己要用的名字，同时在

里用class来引用就可以了。

第二个是整个树的样式，就是修改ademo中的a标签就可以了。

第三个是echarts，坦白讲这个插件是这三个中使用最爽的了。

先附上官网地址：http://echarts.baidu.com/。
引用这个插件只需要

就可以了。

先附上最简单的实现。

 1               

其他的不解释，介绍一下颜色变化的使用方法，就是itemstyle->normal->color,然后设置一个colorList，将颜色列表顺序放入其中，然后颜色就会按顺序显示在图表中。but我js没什么水平，研究通透再谈详细的其他功能。

2016/10/16 17:27:09