easyUI 中增加tab，在tab中导入datagrid的表格

最新推荐文章于 2022-05-10 20:35:55 发布

Long_day

最新推荐文章于 2022-05-10 20:35:55 发布

阅读量3.2k

点赞数

分类专栏： tab 文章标签： easyUI

本文链接：https://blog.csdn.net/Long_day/article/details/80569079

版权

tab 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ 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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/themes/inspur/user-ui-style.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
   <div style="margin-bottom:10px">
       <a class="btm2" href="javascript:addEchars('addEchars')">addEchars</a>
       <a class="btm1" href="javascript:ajaxResult()">查询</a>
   </div>
    <div id="tab" class="easyui-tabs" style="width:650px;height:300px;" tabHeight="40px">
        <div id="char" title="TAB1" style="padding:10px;">
           <p>这是第一个TAB</p>
        </div>
       <div id="main" title="echars" style="width: 600px;height:400px;" closable="true"></div>

    </div>


<script type="text/javascript">
var contextPath = '${pageContext.request.contextPath}';
var _productController = contextPath + '/plugins/modelmanage/modelproduct';
var _modularController = contextPath + '/plugins/modelmanage/appmodelmodular';
var _productGetPage = _productController + '/findPage2EasyUI.ilf';
var _modularGetPage = _modularController + '/findPage2EasyUI.ilf';

function ajaxResult() {

   $.ajax({
           type: "POST",
           url: "${pageContext.request.contextPath}/plugins/modelmanage/modelproduct/findAll.ilf",
           success: function(msg){
               //$.each(msg,function(index){
                 addtab(msg[1]);
               //});
           }
       });

}
   function addtab(product){
       var productName = product.name;
       var producttitle = "产品管理";
       var tableId = "tab"+product.id;
       //var contents = "<table><tr><td>产品名称</td><td>产品描述</td><td>产品版本</td><td>SVN地址</td></tr><tr><td>"+product.name+"</td><td>"+product.description+"</td><td>"+product.version+"</td><td>"+product.svn+"</td></tr></table>";
       var productcontents = "<table id='"+tableId+"'></table>";
       if ($('#tab').tabs('exists', producttitle)) {
           $('#tab').tabs('select', producttitle);
       } else {
           $('#tab').tabs('add',{
                   title:producttitle,
                   closable:true,
                   content:productcontents
           });
       }
       addproducttables(tableId,productName);
       //第二个tab
       var modulartitle = "模块管理";
       var modularcontent = "<table id='tabmodular'></table>";
       if ($('#tab').tabs('exists', modulartitle)) {
           $('#tab').tabs('select', modulartitle);
       } else {
           $('#tab').tabs('add',{
                   title:modulartitle,
                   closable:true,
                   content:modularcontent
           });
       }
       addmodulartables(product.id);
   }

function addmodulartables(productId){
   $('#tabmodular').datagrid({
       url : _modularGetPage,
       rownumbers : true,
       pagination : true,
       fitColumns : true,
       fit : true,
       queryParams : {
           conditions : '[{"name":"productId","value":"'+productId+'"}]'
       },
       singleSelect : false,
       pageSize : 25,
       pageList : [ 25, 50, 75, 100 ],
       remoteSort : true,
       multiSort : true,
       columns : [ [ {
           field : 'id',
           title : "id",
           checkbox : true,
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center'
       },

       {
           field : 'productName',
           title : "产品名称",
           hidden : false,
           width : 100,
           sortable : true,
           align : 'center'

       },

       {
           field : 'name',
           title : "模块名称",
           hidden : false,
           width : 100,
           sortable : true,
           align : 'center'

       },

       {
           field : 'description',
           title : "模块描述",
           hidden : false,
           width : 100,
           sortable : true,
           align : 'center'

       },

       {
           field : 'plugins',
           title : "插件名称",
           hidden : false,
           width : 100,
           sortable : true,
           align : 'center'

       },

       {
           field : 'svn',
           title : "SVN地址",
           hidden : false,
           width : 200,
           sortable : true,
           align : 'center'

       },

       {
           field : 'version',
           title : "模块版本",
           hidden : false,
           width : 100,
           sortable : true,
           align : 'center'

       },

       {
           field : 'productId',
           title : "productId",
           hidden : true,
           width : 100,
           sortable : false,
           align : 'center'

       } ,

       {
           field : 'tempfield',
           title : "功能表",
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center',
           formatter : function(value, row, index) {
               return '<a href="javascript:showFunctions(' + row.id + ')">查看</a>';
           }
       }] ]

   });
}

function addproducttables(tableId,name){
$("#"+tableId).datagrid({
       url : _productGetPage,
       rownumbers : true,
       pagination : true,
       fitColumns : true,
       fit : true,
       queryParams : {
           conditions : '[{"name":"name","value":"'+name+'"}]'
       },
       singleSelect : false,
       pageSize : 25,
       pageList : [ 25, 50, 75, 100 ],
       remoteSort : true,
       multiSort : true,
       columns : [ [ {
           field : 'id',
           title : "产品ID",
           checkbox : true,
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center'
       },

       {
           field : 'name',
           title : "产品名称",
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center'

       },

       {
           field : 'description',
           title : "产品描述",
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center'

       },

       {
           field : 'version',
           title : "产品版本",
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center'

       },

       {
           field : 'svn',
           title : "SVN地址",
           hidden : false,
           width : 100,
           sortable : false,
           align : 'center'

       } ] ]

   });
}
       //删除选择
        $('#tab').tabs({
          onBeforeClose: function(title,index){
           var target = this;
           $.messager.confirm('提示','是否要删除 '+title,function(r){
               if (r){
                   var opts = $(target).tabs('options');
                   var bc = opts.onBeforeClose;
                   opts.onBeforeClose = function(){};
                   $(target).tabs('close',index);
                   opts.onBeforeClose = bc;
               }
           });
           return false;
          }
        });
function addEchars(title){
   var content = '<iframe scrolling="auto" frameborder="0" src="https://www.baidu.com/" style="width:100%;height:100%;"></iframe>';
   if ($('#tab').tabs('exists', title)) {
       $('#tab').tabs('select', title);
   } else {
       $('#tab').tabs('add',{
               title:title,
               closable:true,
               content:content
       });
   }
}
</script>
</body>
</html>

Long_day

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
easyUI 中增加tab，在tab中导入datagrid的表格

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&
复制链接

扫一扫