码迷,mamicode.com
首页 > 其他好文 > 详细

datagrid

时间:2017-09-04 10:53:55      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:增删改查   tag   color   list   span   基本   html   table   war   

1.datagrid基本属性

<script charset=UTF-8">
$(function(){
	$("#datagrid").datagrid({	//给datagrid初始化
			url:‘‘,
			title:‘datagrid‘,
			iconCls:‘icon-save‘,
			pagination:true,	//分页
			pagesize:10,	//每页有10行数据
			pageList:[10,20,30,40],	//注意这些数值是pagesize的倍数
			fit:true,
			fitColumns:false,  //false,表示不会出现横向滚动条;true,则表示能出现横向滚动条(列少的时候用)
			nowarp:false,  //当表格中某一行的一个列内容较多时,就会自动折行(换下一行显示)
			border:false,  //去掉datagrid的边框
			idField:‘id‘,	//自动标记选中的行,换页后,前面所选中的行依然保留
			columns:[[
				{
					title:‘编号‘,
					field:‘id‘,
					width:100		//宽度一定要给出,不给出会报错
				},{
					title:‘姓名‘,
					field:‘name‘,
					width:100	
				},{
					title:‘密码‘,
					field:‘password‘,
					width:100	
				}
			
			]],		
		
		});


});


</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<div class="easyui-tabs" border="false" fit="true">
	<div title="用户管理" border="false">
		<table id="datagrid"></table>
	</div>
</div>
   

 

2.datagrid增删改查

(1)

技术分享

columns:[[
				{
					title:‘编号‘,
					field:‘id‘,
					width:100		//宽度一定要给出,不给出会报错
				},{
					title:‘姓名‘,
					field:‘name‘,
					width:100	
				},{
					title:‘密码‘,
					field:‘password‘,
					width:100	
				}
			
			]],
			toolbar:[{
				text:‘增加‘,
				iconCls:‘icon-add‘,
				handler:function(){
				}
			},{
				text:‘删除‘,
				iconCls:‘icon-remove‘,
				handler:function(){
				 }
			 },{
				text:‘修改‘,
				iconCls:‘icon-edit‘,
				handler:function(){
				}
			 },{
				text:‘查询‘,
				iconCls:‘icon-search‘,
				handler:function(){
				}
			  }
			
			]	

  其中可以将这些工具按钮添加分隔符,如下

技术分享

效果如下:

技术分享

也可以自己设计toolbar

技术分享

技术分享

 

datagrid

标签:增删改查   tag   color   list   span   基本   html   table   war   

原文地址:http://www.cnblogs.com/GumpYan/p/7472254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!