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

版权声明：本文为博主原创文章，转载请注明出处。

 

作为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" });

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

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

             <script type="text/javascript">
                 $(document).ready(function () {
                     $("#jqGrid").jqGrid({
                         url: 'data.json',
                         // we set the changes to be made at client side using predefined word clientArray
                         editurl: 'clientArray',
                         datatype: "json",
                         colModel: [
                             {
                                 label: 'Customer ID',
                                 name: 'CustomerID',
                                 width: 90,
                                 key: true,
                                 editable: true,
                                 editrules : { required: true}
                             },
                             {
                                 label: 'Company Name',
                                 name: 'CompanyName',
                                 width: 160,
                                 editable: true // must set editable to true if you want to make the field editable
                             },
                             {
                                 label : 'Phone',
                                 name: 'Phone',
                                 width: 140,
                                 editable: true
                             },
                             {
                                 label: 'Postal Code',
                                 name: 'PostalCode',
                                 width: 100,
                                 editable: true
                             },
                             {
                                 label: 'City',
                                 name: 'City',
                                 width: 140,
                                 editable: true
                             }
                         ],
                         sortname: 'CustomerID',
                         sortorder : 'asc',
                         loadonce: true,
                         viewrecords: true,
                         height: "auto",
                         weight:"auto",
                         rowNum: 10,
                         pager: "#jqGridPager",

                 });
                     <!--此行代码用来解决有两个横向滚动条的问题  -->
                     $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });

                     $('#jqGrid').navGrid('#jqGridPager',
                             // the buttons to appear on the toolbar of the grid
                             { edit: true, add: true, del: true, search: false, refresh: false, view: false,
                                 position: "left", cloneToTop: false },
                             // options for the Edit Dialog
                             {
                                 editCaption: "The Edit Dialog",
                                 recreateForm: true,
                                 checkOnUpdate : true,
                                 checkOnSubmit : true,
                                 closeAfterEdit: true,
                                 errorTextFormat: function (data) {
                                     return 'Error: ' + data.responseText
                                 }
                             },
                             // options for the Add Dialog
                             {
                                 closeAfterAdd: true,
                                 recreateForm: true,
                                 errorTextFormat: function (data) {
                                     return 'Error: ' + data.responseText
                                 }
                             },
                             // options for the Delete Dailog
                             {
                                 errorTextFormat: function (data) {
                                     return 'Error: ' + data.responseText
                                 }
                             });
                 });
             </script>

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

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

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

2、ztree

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

引用方式还是这样

   <link rel="stylesheet" href="styles/demo.css" type="text/css">
     <link rel="stylesheet" href="styles/zTreeStyle.css" type="text/css">
     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
     <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

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

 <SCRIPT type="text/javascript">
         <!--
         var setting = {    };

         var zNodes =[
             { name:"父节点1 - 展开", open:true,
                 children: [
                     { name:"父节点11 - 折叠",
                         children: [
                             { name:"叶子节点111"},
                             { name:"叶子节点112"},
                             { name:"叶子节点113"},
                             { name:"叶子节点114"}
                         ]},
                     { name:"父节点12 - 折叠",
                         children: [
                             { name:"叶子节点121"},
                             { name:"叶子节点122"},
                             { name:"叶子节点123"},
                             { name:"叶子节点124"}
                         ]},
                     { name:"父节点13 - 没有子节点", isParent:true}
                 ]},
             { name:"父节点2 - 折叠",
                 children: [
                     { name:"父节点21 - 展开", open:true,
                         children: [
                             { name:"叶子节点211"},
                             { name:"叶子节点212"},
                             { name:"叶子节点213"},
                             { name:"叶子节点214"}
                         ]},
                     { name:"父节点22 - 折叠",
                         children: [
                             { name:"叶子节点221"},
                             { name:"叶子节点222"},
                             { name:"叶子节点223"},
                             { name:"叶子节点224"}
                         ]},
                     { name:"父节点23 - 折叠",
                         children: [
                             { name:"叶子节点231"},
                             { name:"叶子节点232"},
                             { name:"叶子节点233"},
                             { name:"叶子节点234"}
                         ]}
                 ]},
             { name:"父节点3 - 没有子节点", isParent:true}

         ];

         $(document).ready(function(){
             $.fn.zTree.init($("#treeDemo"), setting, zNodes);
         });
         //-->
     </SCRIPT>

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

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

再说两个其他的，一是树的样式调整的位置是在demo.css文件里，里边有一项ztreedemo的选项，将他改为自己要用的名字，同时在<ul>里用class来引用就可以了。

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

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

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

<!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script>

就可以了。

先附上最简单的实现。

               <script type="text/javascript">
                   // 基于准备好的dom，初始化echarts实例
                   var myChart = echarts.init(document.getElementById('cdataTableQuery2'));

                   // 指定图表的配置项和数据
                   var option = {
                       title: {
                           text: '图表展示'
                       },
                       tooltip: {},
                       legend: {
                           data:['数目']
                       },
                       xAxis: {
                           data: ["沉降点","涵洞","水文孔","天气","地下水","不良路段"]
                       },
                       yAxis: {},
                       series: [{
                           name: '数目',
                           itemStyle:{
                               normal:{
                                   color: function(params) {
                                       // build a color map as your need.
                                       var colorList = [
                                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                       ];
                                       return colorList[params.dataIndex]
                                   },
                               }
                           },
                           type: 'bar',
                           data: [5, 35, 36, 20, 88, 99]
                       }]
                   };

                   // 使用刚指定的配置项和数据显示图表。
                   myChart.setOption(option);
               </script>

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

2016/10/16 17:27:09