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
先附上一个最简单的树来举个栗子
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
上一篇: PHP取得用户的真实IP地址
下一篇: PHP操作XML作为数据库的类