easyUI_04（DataGrid数据查询）

最新推荐文章于 2023-04-26 08:39:32 发布

原创最新推荐文章于 2023-04-26 08:39:32 发布 · 896 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端 #javascript #eclipse

本文详细介绍了easyUI中的DataGrid组件，包括其基本属性如toolbar、formatter、styler和sorter，以及事件处理如onDblClickRow和按钮点击查询。同时，探讨了DataGrid的分页配置和请求响应参数格式。此外，还提到了Dialog对话框、Message消息窗口和Form表单在后台管理系统中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DataGrid

1.1 DataGrid基本属性

1.1.1 基本属性

      url : '',         // 初始化请求路径
      fitcolumns : false,     // 列宽自适应
      singleSelect : true,     // 是否选中单行
      checkOnSelect : true,     // 点击行选中时该checkbox选中或取消选中
      rownumbers:true,            // 行号
      fit : true,         // 高宽自适应
      border : false,             // 是否显示边框
      title : '书本列表',     // datagrid标题
      striped : true,             // 显示斑马线效果

1.1.2 toobar属性（增删改）

  toolbar : "#tb",            // 自定义工具栏

1.1.3 formatter单元格格式化

1.1.4 styler单元格样式

1.1.5 sorter

1.1.6 editor

 <!-- datagrid数据表格中的toolbar自定义工具栏 -->
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add();">增加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="edit();">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="del();">移除</a>
</div>

1.2 DataGrid事件

1.2.1 onDblClickRow双击行事件

  onDblClickRow:function(index,row){}

1.2.2 按钮点击查询

   //查询参数
   var param={
    'bookName':$('#bookname').val(),
    'methodName':'query'
   };
   var options = $('#dg').datagrid('options');
   //指定请求Url地址
   options.url="bookAction.action";
   //开始加载数据
   $('#dg').datagrid('load', param);

1.3 DataGrid分页

1.3.1 属性设置

 pagination:true,    // 是否分页
   pageNumber:1,    // 初始化页码
   pageSize:10,        // 初始化每页显示条数

1.3.2 请求/响应参数格式要求

 Request请求：{"page":页码,"rows":每页多少条记录}
   Response响应：{"total":总记录数,"rows":[{数据项1},{数据项2},{数据项3},...]}

Dialog对话框窗口


width : 400,
height : 292,
modal : true,
draggable : true,
collapsible : false,
minimizable : false,
maximizable : false,
title : '编辑书本信息',
buttons:"#dlg-buttons",
href:'bookDetail.jsp',
onLoad:function(){
   //赋值
   $('#ff').form('load',row);
   //重置
   $('#ff').form('reset');
}

<!-- dialog窗口操作按钮 -->
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="dialogSave();">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="dialogClose();">关闭</a>
</div>

<!-- 使用dialog窗口弹出书本详情页面 -->
<div id="openBookDetail" style="display:none;"></div>

Message消息窗口


  3.1 $.messager.alert

  3.2 $.messager.confirm

Form表单

$('#ff').form("submit",{    
    url:'',    
    onSubmit: function(){  
       //form表单验证
       return $(this).form('validate');
    },    
    success:function(data){

    }    
});

//form表单序列化
$('#ff').serialize();

easyUI后台管理系统案例

效果：

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>所有图书信息</title>
<%@ include file="/static/common/easyui-link.jsp"%>
</head>
<body>
	<!-- 搜索栏 -->
	<div style="margin: 15px auto; margin-left: 35%;">
		<input id="strName" class="easyui-validatebox" type="text"
			name="strName" data-options="required:true" /> <a id="bookQry"
			class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
	</div>
	<!-- 表格内容区域 -->

	<table id="bookListID" style="width: 100%">



	</table>
	<div id="tb" style="text-align: right">
		<a href="#" class="easyui-linkbutton"
			data-options="iconCls:'icon-edit',plain:true" /a> <a href="#"
			class="easyui-linkbutton"
			data-options="iconCls:'icon-help',plain:true" /a>
	</div>


	<script type="text/javascript">
//入口函数
	$(function(){
		$('#bookListID').datagrid({ 
			//servlet界面
		    url:xpath+'/BookList.do',  
		    //表格标题
		    columns:[[    
		        {field:'bid',title:'书籍编号',width:'25%',align:'center'},    
		        {field:'bname',title:'书籍名称',width:'25%',align:'center'},    
		        {field:'bprice',title:'书籍价格',width:'25%',align:'center'},   
		        {field:'btype',title:'书籍类型',width:'25%',align:'center'}    
		    ]],
		    //表格中分页工具显示
		    pagination:true,
		    //分页下拉框显示的条数
		    pageList:[10,30,50,60,90],
			//发送请求时携带的参数
			queryParams: {
				searchName: $("#strName").val()
		},
			toolbar: '#tb'
		});  
	

	
	//模糊查询的点击事件
	$("#bookQry").click(function(){
		//alert(123);
		mydemo();
	});
	//默认调方法
	mydemo();
	
	

	//封装一个方法实现自动加载第一页的所有行
	function mydemo(){
		$("#bookListID").datagrid('load',{
			searchName: $("#strName").val()
		});
	}
	
	});
	
	
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理首页</title>
<!-- 通过include指令引入easyui-link.jsp页面 -->
<%@ include file="/static/common/easyui-link.jsp"%>
<script type="text/javascript">
	console.log(xpath);
</script>

<!-- 树形菜单 -->
<script type="text/javascript">
	$(function() {
		$("#menuTree").tree({
			url : xpath + '/PromissionList.do',
			onClick : function(node) {
				addoDiv(node);
			}
		});
	});

	/* 封装一个新增方法 */
	// add a new tab panel    
	function addoDiv(node) {
		/* 设置点击上一级菜单无选项卡出现 */
		if (node.id == -1) {
			return;
		}
		/* 通过exists判断选项卡是否存在 */
		let flag = $("#oDiv").tabs('exists', node.text);
		if (flag == true) {
			$("#oDiv").tabs('select', node.text);
			return;
		}

		$("#oDiv")
				.tabs(
						'add',
						{
							title : node.text,
							content : "<iframe style = 'margin:0px;padding:0px;border:0;'  src = '"
									+ xpath
									+ node.url
									+ "' width='100%' height='100%''>",
							closable : true,

						});
	}
</script>
</head>
<body>
	<div data-options="fit:true" class="easyui-layout">
		<!-- 头部 -->
		<div data-options="region:'north',title:'后台管理系统',split:true"
			style="height: 30px;"></div>
		<div data-options="region:'south',title:'首页底部',split:true"
			style="height: 100px;">
			<div class="form-group" style="margin-top: 20px;">
				<p>&copy;&copy;&copy;所有版权信息归碰哒鬼集团所有</p>
			</div>
		</div>
		<div data-options="region:'west',title:'后台菜单',split:true"
			style="width: 160px;">
			<ul id="menuTree" class="easyui-tree">


			</ul>
		</div>
		<div data-options="region:'center',title:'内容展示📕'"
			style="padding: 5px; background: #eee;">
			<!-- 选项卡 -->
			<div id="oDiv" class="easyui-tabs" data-options="fit:true"></div>

		</div>
	</div>
</body>
</html>