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

时间:2024-07-20 14:37:20

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

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

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

web前端开发控件学习笔记之jqgrid+ztree+echarts
当然也先附上实现上图的代码
             <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