easyui选项卡，分页查询

• 在二级菜单的基础上增加tab页继承和分页查询
• Book
  • pirvate Integer id;
  • private String bookname;
  • private String booktype;
  • private BigDecimal price;
• BookDao
  • public List<Book> listBook(String bookName,PageBean pageBean){
  • String sql="select * from t_book where 1=1 ";
  • List<Object> param=new ArrayList<>();
  • if(bookName !=null && !"".equals(bookName)){
  • sql+=" and bookname like ? ";
  • param.add(bookName+"%");
  • }
  • List<Book> books=DbTemplate.query(sql,param.toAarray(),pageBean,Book.class);
  • return books;
  • }
• BookAction 继承 AbstractDispatchAction 实现 ModelDrive
  • private Book book=new Book();
  • private Book book=new Book();
  • 重写方法返回book
  • public void getBooks(HttpServletReqyest req ,HttpServletResponse resp){
  • PageBean pageBean=new PageBean();
  • pageBean.setRequest(req);
  • Map<String ,Object> data=new HashMap<String,Object> ();
  • List<Book> listBook=dao.listBooks(book.getBookname(),pageBean);
  • data.put("total",pageBean.getTotal());
  • data.put("rows".listBooks);
  • ObjectMapper mapper=new ObjectMapper();
  • mapper.writeValue(resp.getOutputStream(),data);
  • }
• config.xml
  • <action path="/bookAction" type="路径"></action>
• 在t_module表有一个路径列
  • webapp/jsp/book
  • 页面
    • bookList.jsp
    • 导入公共页面 <%@ include file="../../common/head.jsp"%>
    • <div style="margub-bottim:10px;">
    • <input id="bookname" class="easyui-textbox" style="width:200px">
    • <a id="bookbtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    • </div>
    • <table id="booktable" class="easyui-datagrid" data-options="fitColumns:true,pagination:true">
    • <thead> <tr>
    • <th data-options="field:'id'" styple='width: 80px;'>编码</th>
    • <th data-options="field:'bookname'"styple='width: 150px;'>名称</th>
    • <th data-options="field:'price'" styple='width: 80px;'>价格</th>
    • <th data-options="field:'booktype'"styple='width: 80px;'>类型</th>
    • </tr> </thead> </table>
    • <script type="text/javascript">
    • $(function({
    • $("#booktable").datagrid({
    • url : '${ctx}/bookAction.action?methodName=getBooks'
    • });
    • $("#bookbtn").click(function(){
    • qbook();
    • })
    • function qbook(){
    • $("#booktable").datagrid("load",{
    • bookname:("#bookname").val()
    • });
    • }
    • })
    • </script>
• index.jsp和二级菜单差不多,只增加了一点点
  • $(function(){
  • $.ajax({
  • url :'${ctx}/moduleAction.action?methodName=getModules',
  • type:'get',//提交类型是get的
  • data:{
  • pid:-1
  • },
  • dataType:'JSON',//返回的类型
  • 成功之后的回调函数
  • success : function(data){
  • $.each(data,function(index,m){
  • $("#menu").accordion('add',{
  • title:m.text,
  • content:'<ul id=' + m.id + ' alt=' + m.text + ' class="easyui-tree"></ul>',
  • selected:false
  • });
  • });
  • $("#menu").accordion({
  • onSelect : function(title,index){//index是序号
  • let obj=$("ul [alt="+title+"]");
  • let pid=obj.atttr("id");//获取子菜单
  • if(obj.tree("getRoots").length > 0) return;//避免重复加载
  • obj.tree({
  • url: '${ctx}/moduleAction.action?methodName=getModules',
  • queryParams:{
  • pid :pid
  • },
  • 比之前新增的内容
  • onClick:function(node){
  • if($("#funtab").tabs("exists",node.text)) return ;//判断是否存在
  • $("#funtab").tabs('add',{
  • title:node.text,
  • closable :true,
  • content:'<iframe frameborder=0 style="width:100%; height:100%" scrolling="no" src="'+node.url+'"/>'
  • });
  • }
  • });
  • }
  • });
  • },
  • error:function(error){
  • console.log(error);
  • }
  • })
  • })