作为web前端初学者，今天要记录的是三个控件的使用心得，分别是表格控件jqgrid，树形控件ztree，图表控件echarts。下边分别进行描述。
1.jqgrid
首先放官方demo网站上来，http://blog.mn886.net/jqGrid/，上面的描述还是挺有帮助的。
jqgrid的添加是比较简单的，就是下载好之后将js文件和css文件分别放在相应的目录下，在使用时按照
<link rel="stylesheet" type="text/css" media="screen"<span style="color: #000000">
href</span>="style/ui.gqgrid-bootstrap.css"/>
<script src="js\grid.locale-en.js" type="text/javascript"></script><br><span style="font-size: 14px">分别从相关目录下引用就可以了。<br>下边介绍一个简单的实例并且说下其中参数的设置<br></span>
<script type="text/javascript"><span style="color: #000000">
$(document).ready(</span><span style="color: #0000ff">function</span><span style="color: #000000">(){
$(</span>"#list4"<span style="color: #000000">).jqGrid({
url:</span>"data.json"<span style="color: #000000">,
datatype:</span>"json", <span style="color: #008000">//</span><span style="color: #008000">数据来源，本地数据</span>
mtype:"POST",<span style="color: #008000">//</span><span style="color: #008000">提交方式</span>
width:1000<span style="color: #000000">,
height:</span>700,<span style="color: #008000">//</span><span style="color: #008000">高度，表格高度。可为数值、百分比或'auto'</span>
colNames:['Customer ID', 'Company Name', 'Phone','City'<span style="color: #000000">],
colModel:[
{name:</span>'CustomerID', width:'20%',align:'center'<span style="color: #000000"> },
{name:</span>'CompanyName', width:'15%',align:'center'<span style="color: #000000">},
{name:</span>'Phone', width:'20%', align:"center"<span style="color: #000000">},
{name:</span>'City', width:'35%', align:"center"<span style="color: #000000"> }
],
rownumbers:</span><span style="color: #0000ff">true</span>,<span style="color: #008000">//</span><span style="color: #008000">添加左侧行号</span><span style="color: #008000">
//</span><span style="color: #008000">altRows:true,//设置为交替行表格,默认为false</span>
sortname:'CustomerID'<span style="color: #000000">,
sortorder:</span>'asc'<span style="color: #000000">,
viewrecords: </span><span style="color: #0000ff">true</span>,<span style="color: #008000">//</span><span style="color: #008000">是否在浏览导航栏显示记录总数</span>
rowNum:15,<span style="color: #008000">//</span><span style="color: #008000">每页显示记录数</span>
rowList:[1,2,3,4,5,6,7,8,9,10,10],<span style="color: #008000">//</span><span style="color: #008000">用于改变显示行数的下拉列表框的元素数组。</span>
<span style="color: #000000">jsonReader:{
id: </span>"blackId",<span style="color: #008000">//</span><span style="color: #008000">设置返回参数中，表格ID的名字为blackId</span>
repeatitems : <span style="color: #0000ff">false</span><span style="color: #000000">
},
autoScroll:</span>"false"<span style="color: #000000">,
emptyrecords: </span>"Nothing to display",<span style="color: #008000">//</span><span style="color: #008000">单元格为空时的提示</span>
celledit:"true",<span style="color: #008000">//</span><span style="color: #008000">启动单元格编辑功能</span>
pager:$('#gridPager'<span style="color: #000000">)
});
</span><span style="color: #008000">//</span><span style="color: #008000">navgrid用于设置toolbar</span>
$("#list4").navGrid('#gridPager'<span style="color: #000000">,
{
edit:</span><span style="color: #0000ff">true</span>,add:<span style="color: #0000ff">true</span>,del:<span style="color: #0000ff">true</span>,search:<span style="color: #0000ff">true</span>,refresh:<span style="color: #0000ff">true</span><span style="color: #000000">,
view:</span><span style="color: #0000ff">true</span>,poition:"left",cloneToTop:<span style="color: #0000ff">false</span><span style="color: #000000">
}
);
});
</span></script>现在存在的问题主要是两个，一个是关于页面布局的问题，就是weight和height经常无法约束这个表格，还有不明所以的线出现，同时滚动条的使用也比较奇怪，第二个就是浏览导航栏的问题，无法和表格的布局 调整到一起，经常出现乱跑和只显示局部的问题。
立即学习“前端免费学习笔记（深入）”；
解决了一个显示两个横向滚动条的问题
<!--此行代码用来解决有两个横向滚动条的问题 -->
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
理想状态下我想达到的效果就是这样有表格和下边的导航条
<span style="font-size: 14px"><br><img src="http://images2015.cnblogs.com/blog/1043666/201610/1043666-20161016163934499-830322411.png" alt=""><br>当然也先附上实现上图的代码<br></span>
<span style="color: #008080"> 1</span> <script type="text/javascript">
<span style="color: #008080"> 2</span> $(document).ready(<span style="color: #0000ff">function</span><span style="color: #000000"> () {
</span><span style="color: #008080"> 3</span> $("#jqGrid"<span style="color: #000000">).jqGrid({
</span><span style="color: #008080"> 4</span> url: 'data.json'<span style="color: #000000">,
</span><span style="color: #008080"> 5</span> <span style="color: #008000">//</span><span style="color: #008000"> we set the changes to be made at client side using predefined word clientArray</span>
<span style="color: #008080"> 6</span> editurl: 'clientArray'<span style="color: #000000">,
</span><span style="color: #008080"> 7</span> datatype: "json"<span style="color: #000000">,
</span><span style="color: #008080"> 8</span> <span style="color: #000000"> colModel: [
</span><span style="color: #008080"> 9</span> <span style="color: #000000"> {
</span><span style="color: #008080">10</span> label: 'Customer ID'<span style="color: #000000">,
</span><span style="color: #008080">11</span> name: 'CustomerID'<span style="color: #000000">,
</span><span style="color: #008080">12</span> width: 90<span style="color: #000000">,
</span><span style="color: #008080">13</span> key: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">14</span> editable: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">15</span> editrules : { required: <span style="color: #0000ff">true</span><span style="color: #000000">}
</span><span style="color: #008080">16</span> <span style="color: #000000"> },
</span><span style="color: #008080">17</span> <span style="color: #000000"> {
</span><span style="color: #008080">18</span> label: 'Company Name'<span style="color: #000000">,
</span><span style="color: #008080">19</span> name: 'CompanyName'<span style="color: #000000">,
</span><span style="color: #008080">20</span> width: 160<span style="color: #000000">,
</span><span style="color: #008080">21</span> editable: <span style="color: #0000ff">true</span> <span style="color: #008000">//</span><span style="color: #008000"> must set editable to true if you want to make the field editable</span>
<span style="color: #008080">22</span> <span style="color: #000000"> },
</span><span style="color: #008080">23</span> <span style="color: #000000"> {
</span><span style="color: #008080">24</span> label : 'Phone'<span style="color: #000000">,
</span><span style="color: #008080">25</span> name: 'Phone'<span style="color: #000000">,
</span><span style="color: #008080">26</span> width: 140<span style="color: #000000">,
</span><span style="color: #008080">27</span> editable: <span style="color: #0000ff">true</span>
<span style="color: #008080">28</span> <span style="color: #000000"> },
</span><span style="color: #008080">29</span> <span style="color: #000000"> {
</span><span style="color: #008080">30</span> label: 'Postal Code'<span style="color: #000000">,
</span><span style="color: #008080">31</span> name: 'PostalCode'<span style="color: #000000">,
</span><span style="color: #008080">32</span> width: 100<span style="color: #000000">,
</span><span style="color: #008080">33</span> editable: <span style="color: #0000ff">true</span>
<span style="color: #008080">34</span> <span style="color: #000000"> },
</span><span style="color: #008080">35</span> <span style="color: #000000"> {
</span><span style="color: #008080">36</span> label: 'City'<span style="color: #000000">,
</span><span style="color: #008080">37</span> name: 'City'<span style="color: #000000">,
</span><span style="color: #008080">38</span> width: 140<span style="color: #000000">,
</span><span style="color: #008080">39</span> editable: <span style="color: #0000ff">true</span>
<span style="color: #008080">40</span> <span style="color: #000000"> }
</span><span style="color: #008080">41</span> <span style="color: #000000"> ],
</span><span style="color: #008080">42</span> sortname: 'CustomerID'<span style="color: #000000">,
</span><span style="color: #008080">43</span> sortorder : 'asc'<span style="color: #000000">,
</span><span style="color: #008080">44</span> loadonce: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">45</span> viewrecords: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">46</span> height: "auto"<span style="color: #000000">,
</span><span style="color: #008080">47</span> weight:"auto"<span style="color: #000000">,
</span><span style="color: #008080">48</span> rowNum: 10<span style="color: #000000">,
</span><span style="color: #008080">49</span> pager: "#jqGridPager"<span style="color: #000000">,
</span><span style="color: #008080">50</span>
<span style="color: #008080">51</span> <span style="color: #000000"> });
</span><span style="color: #008080">52</span> <!--此行代码用来解决有两个横向滚动条的问题 -->
<span style="color: #008080">53</span> $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden"<span style="color: #000000"> });
</span><span style="color: #008080">54</span>
<span style="color: #008080">55</span> $('#jqGrid').navGrid('#jqGridPager'<span style="color: #000000">,
</span><span style="color: #008080">56</span> <span style="color: #008000">//</span><span style="color: #008000"> the buttons to appear on the toolbar of the grid</span>
<span style="color: #008080">57</span> { edit: <span style="color: #0000ff">true</span>, add: <span style="color: #0000ff">true</span>, del: <span style="color: #0000ff">true</span>, search: <span style="color: #0000ff">false</span>, refresh: <span style="color: #0000ff">false</span>, view: <span style="color: #0000ff">false</span><span style="color: #000000">,
</span><span style="color: #008080">58</span> position: "left", cloneToTop: <span style="color: #0000ff">false</span><span style="color: #000000"> },
</span><span style="color: #008080">59</span> <span style="color: #008000">//</span><span style="color: #008000"> options for the Edit Dialog</span>
<span style="color: #008080">60</span> <span style="color: #000000"> {
</span><span style="color: #008080">61</span> editCaption: "The Edit Dialog"<span style="color: #000000">,
</span><span style="color: #008080">62</span> recreateForm: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">63</span> checkOnUpdate : <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">64</span> checkOnSubmit : <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">65</span> closeAfterEdit: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">66</span> errorTextFormat: <span style="color: #0000ff">function</span><span style="color: #000000"> (data) {
</span><span style="color: #008080">67</span> <span style="color: #0000ff">return</span> 'Error: ' +<span style="color: #000000"> data.responseText
</span><span style="color: #008080">68</span> <span style="color: #000000"> }
</span><span style="color: #008080">69</span> <span style="color: #000000"> },
</span><span style="color: #008080">70</span> <span style="color: #008000">//</span><span style="color: #008000"> options for the Add Dialog</span>
<span style="color: #008080">71</span> <span style="color: #000000"> {
</span><span style="color: #008080">72</span> closeAfterAdd: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">73</span> recreateForm: <span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">74</span> errorTextFormat: <span style="color: #0000ff">function</span><span style="color: #000000"> (data) {
</span><span style="color: #008080">75</span> <span style="color: #0000ff">return</span> 'Error: ' +<span style="color: #000000"> data.responseText
</span><span style="color: #008080">76</span> <span style="color: #000000"> }
</span><span style="color: #008080">77</span> <span style="color: #000000"> },
</span><span style="color: #008080">78</span> <span style="color: #008000">//</span><span style="color: #008000"> options for the Delete Dailog</span>
<span style="color: #008080">79</span> <span style="color: #000000"> {
</span><span style="color: #008080">80</span> errorTextFormat: <span style="color: #0000ff">function</span><span style="color: #000000"> (data) {
</span><span style="color: #008080">81</span> <span style="color: #0000ff">return</span> 'Error: ' +<span style="color: #000000"> data.responseText
</span><span style="color: #008080">82</span> <span style="color: #000000"> }
</span><span style="color: #008080">83</span> <span style="color: #000000"> });
</span><span style="color: #008080">84</span> <span style="color: #000000"> });
</span><span style="color: #008080">85</span> </script>关于navGrid的内容目前还不是太理解，等下周在做新的总结。
还有的就是用的数据格式json，控制时用和json中同名的的id控制。
jqgrid先说到这里吧，有了新的理解再说。
2、ztree
还是先附上官方地址：http://www.treejs.cn/v3/demo.php#_102。
引用方式还是这样
<span style="color: #008080">1</span> <link rel="stylesheet" href="styles/demo.css" type="text/css"> <span style="color: #008080">2</span> <link rel="stylesheet" href="styles/zTreeStyle.css" type="text/css"> <span style="color: #008080">3</span> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <span style="color: #008080">4</span> <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
先附上一个最简单的树来举个栗子
<span style="color: #008080"> 1</span> <SCRIPT type="text/javascript">
<span style="color: #008080"> 2</span> <!--
<span style="color: #008080"> 3</span> <span style="color: #0000ff">var</span> setting =<span style="color: #000000"> { };
</span><span style="color: #008080"> 4</span>
<span style="color: #008080"> 5</span> <span style="color: #0000ff">var</span> zNodes =<span style="color: #000000">[
</span><span style="color: #008080"> 6</span> { name:"父节点1 - 展开", open:<span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080"> 7</span> <span style="color: #000000"> children: [
</span><span style="color: #008080"> 8</span> { name:"父节点11 - 折叠"<span style="color: #000000">,
</span><span style="color: #008080"> 9</span> <span style="color: #000000"> children: [
</span><span style="color: #008080">10</span> { name:"叶子节点111"<span style="color: #000000">},
</span><span style="color: #008080">11</span> { name:"叶子节点112"<span style="color: #000000">},
</span><span style="color: #008080">12</span> { name:"叶子节点113"<span style="color: #000000">},
</span><span style="color: #008080">13</span> { name:"叶子节点114"<span style="color: #000000">}
</span><span style="color: #008080">14</span> <span style="color: #000000"> ]},
</span><span style="color: #008080">15</span> { name:"父节点12 - 折叠"<span style="color: #000000">,
</span><span style="color: #008080">16</span> <span style="color: #000000"> children: [
</span><span style="color: #008080">17</span> { name:"叶子节点121"<span style="color: #000000">},
</span><span style="color: #008080">18</span> { name:"叶子节点122"<span style="color: #000000">},
</span><span style="color: #008080">19</span> { name:"叶子节点123"<span style="color: #000000">},
</span><span style="color: #008080">20</span> { name:"叶子节点124"<span style="color: #000000">}
</span><span style="color: #008080">21</span> <span style="color: #000000"> ]},
</span><span style="color: #008080">22</span> { name:"父节点13 - 没有子节点", isParent:<span style="color: #0000ff">true</span><span style="color: #000000">}
</span><span style="color: #008080">23</span> <span style="color: #000000"> ]},
</span><span style="color: #008080">24</span> { name:"父节点2 - 折叠"<span style="color: #000000">,
</span><span style="color: #008080">25</span> <span style="color: #000000"> children: [
</span><span style="color: #008080">26</span> { name:"父节点21 - 展开", open:<span style="color: #0000ff">true</span><span style="color: #000000">,
</span><span style="color: #008080">27</span> <span style="color: #000000"> children: [
</span><span style="color: #008080">28</span> { name:"叶子节点211"<span style="color: #000000">},
</span><span style="color: #008080">29</span> { name:"叶子节点212"<span style="color: #000000">},
</span><span style="color: #008080">30</span> { name:"叶子节点213"<span style="color: #000000">},
</span><span style="color: #008080">31</span> { name:"叶子节点214"<span style="color: #000000">}
</span><span style="color: #008080">32</span> <span style="color: #000000"> ]},
</span><span style="color: #008080">33</span> { name:"父节点22 - 折叠"<span style="color: #000000">,
</span><span style="color: #008080">34</span> <span style="color: #000000"> children: [
</span><span style="color: #008080">35</span> { name:"叶子节点221"<span style="color: #000000">},
</span><span style="color: #008080">36</span> { name:"叶子节点222"<span style="color: #000000">},
</span><span style="color: #008080">37</span> { name:"叶子节点223"<span style="color: #000000">},
</span><span style="color: #008080">38</span> { name:"叶子节点224"<span style="color: #000000">}
</span><span style="color: #008080">39</span> <span style="color: #000000"> ]},
</span><span style="color: #008080">40</span> { name:"父节点23 - 折叠"<span style="color: #000000">,
</span><span style="color: #008080">41</span> <span style="color: #000000"> children: [
</span><span style="color: #008080">42</span> { name:"叶子节点231"<span style="color: #000000">},
</span><span style="color: #008080">43</span> { name:"叶子节点232"<span style="color: #000000">},
</span><span style="color: #008080">44</span> { name:"叶子节点233"<span style="color: #000000">},
</span><span style="color: #008080">45</span> { name:"叶子节点234"<span style="color: #000000">}
</span><span style="color: #008080">46</span> <span style="color: #000000"> ]}
</span><span style="color: #008080">47</span> <span style="color: #000000"> ]},
</span><span style="color: #008080">48</span> { name:"父节点3 - 没有子节点", isParent:<span style="color: #0000ff">true</span><span style="color: #000000">}
</span><span style="color: #008080">49</span>
<span style="color: #008080">50</span> <span style="color: #000000"> ];
</span><span style="color: #008080">51</span>
<span style="color: #008080">52</span> $(document).ready(<span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">53</span> $.fn.zTree.init($("#treeDemo"<span style="color: #000000">), setting, zNodes);
</span><span style="color: #008080">54</span> <span style="color: #000000"> });
</span><span style="color: #008080">55</span> <span style="color: #008000">//</span><span style="color: #008000">--></span>
<span style="color: #008080">56</span> </SCRIPT>就是通过父节点下建立新节点来表示树形结构。先在开始分别设置setting和znodes，然后用初始化函数init，将setting和znodes作为初始化参数放进去进行初始化。
现在需要解决的问题主要有两个，一是树形结构没了，所有的文字出现在了同一列，没有了缩进。二是如何引用json数据来控制而不是直接输入。解决了再po上来。
再说两个其他的，一是树的样式调整的位置是在demo.css文件里，里边有一项ztreedemo的选项，将他改为自己要用的名字，同时在
第二个是整个树的样式，就是修改ademo中的a标签就可以了。
第三个是echarts，坦白讲这个插件是这三个中使用最爽的了。
先附上官网地址：http://echarts.baidu.com/。
引用这个插件只需要
就可以了。
先附上最简单的实现。
<span style="color: #008080"> 1</span> <script type="text/javascript">
<span style="color: #008080"> 2</span> <span style="color: #008000">//</span><span style="color: #008000"> 基于准备好的dom，初始化echarts实例</span>
<span style="color: #008080"> 3</span> <span style="color: #0000ff">var</span> myChart = echarts.init(document.getElementById('cdataTableQuery2'<span style="color: #000000">));
</span><span style="color: #008080"> 4</span>
<span style="color: #008080"> 5</span> <span style="color: #008000">//</span><span style="color: #008000"> 指定图表的配置项和数据</span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff">var</span> option =<span style="color: #000000"> {
</span><span style="color: #008080"> 7</span> <span style="color: #000000"> title: {
</span><span style="color: #008080"> 8</span> text: '图表展示'
<span style="color: #008080"> 9</span> <span style="color: #000000"> },
</span><span style="color: #008080">10</span> <span style="color: #000000"> tooltip: {},
</span><span style="color: #008080">11</span> <span style="color: #000000"> legend: {
</span><span style="color: #008080">12</span> data:['数目'<span style="color: #000000">]
</span><span style="color: #008080">13</span> <span style="color: #000000"> },
</span><span style="color: #008080">14</span> <span style="color: #000000"> xAxis: {
</span><span style="color: #008080">15</span> data: ["沉降点","涵洞","水文孔","天气","地下水","不良路段"<span style="color: #000000">]
</span><span style="color: #008080">16</span> <span style="color: #000000"> },
</span><span style="color: #008080">17</span> <span style="color: #000000"> yAxis: {},
</span><span style="color: #008080">18</span> <span style="color: #000000"> series: [{
</span><span style="color: #008080">19</span> name: '数目'<span style="color: #000000">,
</span><span style="color: #008080">20</span> <span style="color: #000000"> itemStyle:{
</span><span style="color: #008080">21</span> <span style="color: #000000"> normal:{
</span><span style="color: #008080">22</span> color: <span style="color: #0000ff">function</span><span style="color: #000000">(params) {
</span><span style="color: #008080">23</span> <span style="color: #008000">//</span><span style="color: #008000"> build a color map as your need.</span>
<span style="color: #008080">24</span> <span style="color: #0000ff">var</span> colorList =<span style="color: #000000"> [
</span><span style="color: #008080">25</span> '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'<span style="color: #000000">,
</span><span style="color: #008080">26</span> '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'<span style="color: #000000">,
</span><span style="color: #008080">27</span> '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
<span style="color: #008080">28</span> <span style="color: #000000"> ];
</span><span style="color: #008080">29</span> <span style="color: #0000ff">return</span><span style="color: #000000"> colorList[params.dataIndex]
</span><span style="color: #008080">30</span> <span style="color: #000000"> },
</span><span style="color: #008080">31</span> <span style="color: #000000"> }
</span><span style="color: #008080">32</span> <span style="color: #000000"> },
</span><span style="color: #008080">33</span> type: 'bar'<span style="color: #000000">,
</span><span style="color: #008080">34</span> data: [5, 35, 36, 20, 88, 99<span style="color: #000000">]
</span><span style="color: #008080">35</span> <span style="color: #000000"> }]
</span><span style="color: #008080">36</span> <span style="color: #000000"> };
</span><span style="color: #008080">37</span>
<span style="color: #008080">38</span> <span style="color: #008000">//</span><span style="color: #008000"> 使用刚指定的配置项和数据显示图表。</span>
<span style="color: #008080">39</span> <span style="color: #000000"> myChart.setOption(option);
</span><span style="color: #008080">40</span> </script>其他的不解释，介绍一下颜色变化的使用方法，就是itemstyle->normal->color,然后设置一个colorList，将颜色列表顺序放入其中，然后颜色就会按顺序显示在图表中。but我js没什么水平，研究通透再谈详细的其他功能。
2016/10/16 17:27:09
<span style="font-size: 14px"> </span>
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
641
收藏
