JQuery中的DataGrid入门

最新推荐文章于 2023-04-18 10:06:15 发布

WithYou_wy

最新推荐文章于 2023-04-18 10:06:15 发布

阅读量1.6k

点赞数 1

分类专栏：技术与感悟文章标签： jquery datagrid

本文链接：https://blog.csdn.net/WithYou_wy/article/details/53079052

版权

技术与感悟专栏收录该内容

12 篇文章 0 订阅

订阅专栏

以前在学校学习的时候根本没用过DataGrid，连听说都没听说过，但在实习的时候却用到这一部分的知识点，经过查阅资料，知道了她的功能，以及掌握基础的使用，还是实习见识的更多一些。接下来就和大家分享一下我对这一部分掌握的知识。

一、DataGrid的定义：她是用来创建数据网格的，是一种轻量级框架，不要求开发者具备专业知识就可以对其进行应用；她创建出来的数据网格以表格的形式展示数据，并为选择，排序，分页等数据操作提供便捷。

二、DataGrid的基本用法：

在使用DataGrid时候首先加载相关的文件，将加载的代码写在<head></head>标签之间，加载的代码如下（此处加载的文件在官网上下载）：

<link href="/css/easyui.css" rel="stylesheet"></link>
<link href="/css/icon.css" rel="stylesheet"></link>
<link href="/css/main.css" rel="stylesheet"></link>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easyui.min.js"></script>
<script src="/js/easyui-lang-zh_CN.js"  charset="utf-8"></script>

DataGrid的表示一般有两种表示情况，第一种是通过已有的表格元素table来创建数据网格，第二种是通过javaScript来创建数据网格。此处介绍的是用JavaScript来介绍，上代码：

 <table id="tb"  style="width:100%;height:400px"></table>

将此行代码写在body标签中，然后在<head>中的<script>标签里写上一下代码：

$(function(){
 	$("#tb").datagrid({
				url:'../json/data.json',//引入的本地的数据文件
				rownumbers:true,//是否显示列数
				iconCls: 'icon-save',
				singleSelect:true,//此处选择的时候只能选择单行
				autoRowHeight:false,//此处设置行高度自适应
				pagination:true,//是否分页显示
				pageSize:10,//每页显示的页数
				pageList:[5,10,15,20],//这里显示的是页面选择的选项
				toolbar:[           //此标签是设置，添加，编辑，刷新，搜索按钮的
				         {
				        	 text:'add',
				        	 iconCls:'icon-mini-add',
				        	 handler:function(){
				        		 add();
				        	 }
				         },'-',
				         {
				        	 text:'edit',
				        	 iconCls:'icon-mini-edit',
				        	 handler:function(){
				        		 edit();
				        	 }
				         },'-',
				         {
				        	 text:'fresh',
				        	 iconCls:'icon-mini-refresh',
				        	 handler:function(){
				        		 fresh();
				        	 }
				         },'-',
				         {
				        	 text:'search',
				        	 iconCls:'btn-search',
				        	 handler:function(){
				        		 search();
				        	 }
				         }
				         
				         ], 
				idField:'ID',  //此处设置的是选择的框，个人认为相当于checkbox
				columns:[[     //此处设置的是列的列名
				          {field:'ID',title:'编号',width:200,checkbox:true},
				          {field:'name' ,title:'姓名',width:200 },
				          {field:'amount1',title:'总数',width:200},
				          {field:'amount2',title:'已处理',width:200},
				          {field:'amount3',title:'已结案',width:200},
				          {field:'amount4',title:'已超期',width:200,}
				          ]]
	}); 
	
 	function add(){
 		alert("tianjai");//此处是点击添加按钮出现的函数
 	}
 	function fresh(){
 		alert("tianjai");//此处是点击编辑按钮出现的函数
 	}
 	function search(){
 		alert("tianjai");//此处是点击搜索按钮出现的函数
 	}
});

然后就写出了一个简单用DataGrid表达的表格，效果展示如下：

欧拉，最近实习见识了不少的新东西，这些新东西虽然研究的不深，都是用到现查，现学的，但是依然很开心，因为我在进步中。。。。

WithYou_wy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的DataGrid入门

以前在学校学习的时候根本没用过DataGrid，连听说都没听说过，但在实习的时候却用到这一部分的知识点，经过查阅资料，知道了她的功能，以及掌握基础的使用，还是实习见识的更多一些。接下来就和大家分享一下我对这一部分掌握的知识。一、DataGrid的定义：她是用来创建数据网格的，是一种轻量级框架，不要求开发者具备专业知识就可以对其进行应用；她创建出来的数据网格以表格的形式展示数据，并为选择，排序，
复制链接

扫一扫