版权声明：本文为博主原创文章，转载请注明出处。
作为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