欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-01-17 17:40:46
...
作为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" });

  web前端开发控件学习笔记之jqgrid+ztree+echarts理想状态下我想达到的效果就是这样有表格和下边的导航条


web前端开发控件学习笔记之jqgrid+ztree+echarts
当然也先附上实现上图的代码
 1             

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

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

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

2、ztree

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

引用方式还是这样

web前端开发控件学习笔记之jqgrid+ztree+echarts
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