一、datagrid
1、界面代码:
<body>
<!-- 模糊查询 -->
<div style="margin: 20px;text-align: center;">
<select id="xl">
<option value="bname">书籍名称</option>
<option value="btype">书籍类型</option>
</select>
<input id="str" class="easyui-textbox" style="width: 300px">
<a id="btn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-search'">查询</a>
</div>
<!-- 数据表格:用来加载书籍数据 -->
<table id="myTable" class="easyui-datagrid" style="width:100%;height:300px;"></table>
<!-- 工具栏 -->
<div id="myTools" 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-add',plain:true" ></a>
<a href="#"class="easyui-linkbutton"data-options="iconCls:'icon-edit-remove',plain:true" ></a>
</div>
</body>
2、script块:
<script type="text/javascript">
$(function() {
$('#myTree').tree({
url : ctx + '/IndexServlet',//请求地址
animate : true,//折叠或者展开的时候是否显示动画效果
onDblClick : function(node) {
//alert(node.text+" "+node.id+" "+node.state); // 在用户双击的时候提示
//alert(node.iconCls);//图标
//拿到对应的后代节点的集合
var cs=$('#myTree').tree('getChildren',node.target);
//alert(cs.length);
if(cs.length==0){
//判断是否存在
var f = $('#myTab').tabs('exists',node.text);
//alert(f);
if(!f){//说明不存在
//新打开一个选项卡(tab页) iconCls:'icon-ok'
$('#myTab').tabs('add',{
title:node.text, // 标题
content:'<iframe scrolling="no" frameborder="0" width="99%" height="99%" src="'+node.url+'"></iframe>', //内容
closable:true, //是否可关闭
iconCls:node.iconCls
});
}
else{//说明存在 让其对应选中
$('#myTab').tabs('select',node.text);
}
}
}
});
})
</script>
界面展示:
3、servlet块:
package com.zking.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.zking.biz.BookBiz;
import com.zking.biz.IBookBiz;
import com.zking.entity.Book;
@WebServlet("/BookListServlet")
public class BookListServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//三个编码方式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
//获取out对象
PrintWriter out = response.getWriter();
int pageIndex=1;
int pageSize=10;
//接收前台传递过来的参数 page rows bname
String pid=request.getParameter("page");//当前页码
if(pid!=null) {
pageIndex=Integer.parseInt(pid);
}
String size=request.getParameter("rows");//每页多少条
if(size!=null) {
pageSize=Integer.parseInt(size);
}
String bname=request.getParameter("bname");//关键字
if(bname==null) {
bname="";//相当于查询全部
}
String btype=request.getParameter("btype");//列名
if(btype==null) {
btype="bname";
}
//servlet调用biz
IBookBiz ibb=new BookBiz();
//获取总行数
int zhs=ibb.getRows("tb_book where "+btype+" like '%"+bname+"%'");
//拿到分页的集合
List<Book> ls = ibb.getAllByPage(pageIndex, pageSize, btype,bname);
//前台的json数据需要的两个参数:total:总行数 rows:书籍集合
Map<String, Object> mym=new HashMap<>();
//放两对值
mym.put("total", zhs);
mym.put("rows", ls);
//把map集合-->json格式的对象字符串
String str=JSON.toJSONString(mym);
//输送到页面
out.write(str);
out.flush();
out.close();
}
}