一：DataGrid（数据表格）
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。 DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
使用案例：
从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">编码</th>
<th data-options="field:'name'">名称</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>名称1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>名称2</td><td>4612</td>
</tr>
</tbody>
</table> 通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table> 此外，也允许使用Javascript去创建DataGrid控件。
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'代码',width:100},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right'}
]]
});①：基本属性：
| url : '' ” | 初始化请求路径 |
| fitcolumns : false | 列宽自适应 |
| singleSelect : true | 是否选中单行 |
| checkOnSelect : true | 点击行选中时该checkbox选中或取消选中 |
| rownumbers:true | 行号 |
| fit : true | 高宽自适应 |
| border : false | 是否显示边框 |
| title : '书本列表' | datagrid标题 |
| striped : true | 显示斑马线效果 |
②：按钮点击查询事件
-
查询参数
var param={
'bookName':$('#bookname').val(),
'methodName':'query'
};
var options = $('#dg').datagrid('options');-
指定请求Url地址
options.url="bookAction.action";-
开始加载数据
$('#dg').datagrid('load', param); ③：DataGrid分页
-
属性设置
- pagination:true, ------是否分页
- pageNumber:1, -------初始化页码
- pageSize:10, ------初始化每页显示条数
-
请求/响应参数格式要求
- Request请求：{"page":页码,"rows":每页多少条记录}
- Response响应：{"total":总记录数,"rows":[{数据项1},{数据项2},{数据项3},...]}
Dao方法类
package com.zking.ht.promission.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.zking.ht.promission.dao.IBooksDao;
import com.zking.ht.promission.entity.Books;
import com.zking.ht.promission.utils.DBHelper;
public class BooksDaoImpl implements IBooksDao {
@Override
//带搜索的模糊查询
public List<Books> quarryBooks(Integer pageIndex, Integer pageSize, String searchName) {
Integer start = (pageIndex-1)*pageSize +1;
Integer end = pageIndex*pageSize;
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "select b.*from (select a.*,rownum as rid from (select bid,bname,bprice,btype from tb_book where bname like '%"+searchName+"%')a)b where b.rid between "+start+" and "+end+"";
Books books =null;
List<Books> list = new ArrayList<Books>();
try {
conn = DBHelper.getConn();
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()) {
books = new Books();
books.setBid(rs.getInt("bid"));
books.setBname(rs.getString("bname"));
books.setBprice(rs.getFloat("bprice"));
books.setBtype(rs.getString("btype"));
list.add(books);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
return list;
}
public static void main(String[] args) {
List<Books> quarryBooks = new BooksDaoImpl().quarryBooks(1, 7, "");
System.out.println(quarryBooks);
}
@Override
//带搜索的获取最大行数
public Integer getRowTable(String searchName) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "select count(0) from tb_book where bname like '%"+searchName+"%'";
try {
conn = DBHelper.getConn();
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
if(rs.next()) {
return rs.getInt(1);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
return null;
}
}
---------------------------------------------主界面---------------------------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="static/common/easyuibase.jsp"%>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',title:'首页头部',split:true"
style="height: 100px;"></div>
<div data-options="region:'south',title:'版权信息',split:true"
style="height: 100px;"></div>
<div data-options="region:'west',title:'菜单栏',split:true"
style="width: 170px;">
<div id="mytree" class="easyui-accordion"
style="width: 170px; height: 500px;;"></div>
<script type="text/javascript">
$(function() {
$('#mytree').tree({
url:xPath+'/promissionListServlet.do',
onClick:function(node){
addMyTabs(node);
}
});
});
function addMyTabs(node) {
if(node.id === '-1'){
return;
}
var flag = $("#maintabs").tabs('exists',node.text);
if(flag){
$("#maintabs").tabs('select',node.text);
return;
}
$("#maintabs").tabs('add',{
title: node.text,
content:"<iframe src = '"+xPath+node.url+"' width =100% height =100%>",
closable:true,
})
}
</script>
</div>
<div data-options="region:'center',title:'内容'"
style="padding: 5px; background: #eee;">
<div id="maintabs" class="easyui-tabs" data-options="fit:true">
</div>
</div>
</div>
</body>
</html>二：Dialog对话框窗口
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如 collapsible,minimizable,maximizable工具等。
-
用法
通过已存在的DOM节点元素标签创建。下面的例子显示了一个可变大小的模式窗口。
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
Dialog Content.
</div> 使用Javascript创建对话框窗口也是允许的。现在让我们创建一个模式窗口并调用'refresh'方法通过ajax读取内容。
<div id="dd">Dialog Content.</div>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php'); 重要属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 对话框窗口标题文本。 | New Dialog |
| collapsible | boolean | 定义是否显示可折叠按钮。 | false |
| minimizable | boolean | 定义是否显示最小化按钮。 | false |
| maximizable | boolean | 定义是否显示最大化按钮。 | false |
| resizable | boolean | 定义是否可以改变对话框窗口大小。 | false |
| toolbar | array,selector | 设置对话框窗口顶部工具栏，可用值有： 1) 一个数组，每一个工具栏中的工具属性都和linkbutton相同。 2) 一个选择器指定工具栏。 对话框窗口工具栏可以声明在<div>标签里面： <div class="easyui-dialog" style="width:600px;height:300px" 对话框窗口工具栏也可以通过数组进行定义： <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
toolbar:[{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
对话框窗口内容。
</div>
| null |
| buttons | array,selector | 对话框窗口底部按钮，可用值有： 1) 一个数组，每一个按钮的属性都和linkbutton相同。 2) 一个选择器指定按钮栏。 按钮可以声明在<div>标签里面： <div class="easyui-dialog" style="width:600px;height:300px" 按钮也可以通过数组定义： <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'我的对话框',modal:true,
buttons:[{
text:'保存',
handler:function(){...}
},{
text:'关闭',
handler:function(){...}
}]">
对话框窗口内容。
</div>
| null |
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
