您的位置: 首页  >  文章  >  EasyUI一些布局（基本介绍）以及运行结果

EasyUI一些布局（基本介绍）以及运行结果

分类: 文章 • 2024-11-01 15:04:40

一、EasyUI布局介绍

　　easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、北这四个面板，那么可以把相应的div删掉，另外，如果需要创建复杂的easyUI布局，那么可以通过嵌套东、西、南、北、中五个面板来实现。下面简单演示一下EasyUI布局。

  1、通过div创建easyUI布局

　　easyUI的layout可以通过div来创建，使用div来创建easyUI的layout布局，那么div的html代码结构如下： <!--给div指定class属性,并指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->

      <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
          <!-- 布局中如果不需要north这个面板，那么可以删掉这个div --> 
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
       <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->   
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
        <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->   
       <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
        <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 --> 
       <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
      </div>

　　完整的范例：

 <!DOCTYPE html>
  <html>
   <head>
    <title>通过div创建EasyUI的layout布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
       <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
     <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
       <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
  </head>
  <body>
      <!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
      <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
          <!-- 布局中如果不需要north这个面板，那么可以删掉这个div --> 
       <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
       <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->   
       <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
       <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->   
       <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
       <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 --> 
       <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
    </div>  
    </body>
 </html>

　　运行结果如下：

EasyUI一些布局（基本介绍）以及运行结果


 2、通过Javascript创建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>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#myTree').tree({
url : 'tree_data1.json',
onClick : function(node) {

//判断是否存在该选项卡
//获取
var tab=$("#myTabs").tabs('getTab',node.text);
if(tab){
//有：让该选项卡被选中
$('#myTabs').tabs('select',node.text);
}else{
//没有：
//添加选项卡
//关键词
$('#myTabs').tabs('add',{    
   title:node.text,    
   href:'index.jsp',    
   closable:true,
   onLoad:function(){
    $("#account").textbox({
    prompt:"请输入你想要的关键词"
});
   
$("#addUserBtn").linkbutton({
iconCls:'icon-add',
text:'添加',
plain : true,
onClick:add
});

$("#updateUserBtn").linkbutton({
iconCls:'icon-edit',
text:'修改',
plain : true,
});

$("#removeUserBtn").linkbutton({
iconCls:'icon-remove',
text:'删除',
plain : true,
onClick : remove
});

$("#rejectUserBtn").linkbutton({
iconCls:'icon-no',
text:'取消',
plain : true,
onClick : cancel
});

$("#sxUserBtn").linkbutton({
iconCls:'icon-reload',
text:'刷新',
plain : true,
});


$("#dyUserBtn").linkbutton({
iconCls:'icon-print',
text:'打印',
plain : true,
});

$("#bzUserBtn").linkbutton({
iconCls:'icon-help',
text:'帮助',
plain : true,
});

$("#cxUserBtn").linkbutton({
iconCls:'icon-undo',
text:'撤销',
plain : true,
});

$("#czUserBtn").linkbutton({
iconCls:'icon-redo',
text:'重做',
plain : true,
});

$("#zjUserBtn").linkbutton({
iconCls:'icon-sum',
text:'总计',
plain : true,
});

$("#fhUserBtn").linkbutton({
iconCls:'icon-back',
text:'返回',
plain : true,
});

$("#tsUserBtn").linkbutton({
iconCls:'icon-tip',
text:'提示',
plain : true,
});

$("#acceptUserBtn").linkbutton({
iconCls:'icon-save',
text:'保存',
plain : true,
onClick : accept
});

$("#jxUserBtn").linkbutton({
iconCls:'icon-cut',
text:'剪切',
plain : true,
});

//起始时间
$("#qssj").datetimebox({
showSconeds:false
});

//结束时间
$("#jssj").datetimebox({
showSconeds:false
});

$("#assd").datetimebox({
showSconeds:false
});


//     $('#cc').combobox({  
//     prompt:"选择用户组",
//    url:'UserAll.do',    
//    valueField:'pid',    
//    textField:'pname',
//    onSelect:function(record){
//     console.info(record.pname);
//     $("#showProvince").html(record.pname);
//    }
// }); 


    $("#cc").combogrid({
    value:'选择用户组',
  panelWidth:488,
  url:"UserAll.do",
  idField: 'pid',//传过去的参数
  textField: 'pname',//在文本框显示的值
  pageList:[5,1,2,10,20],
  pageSize:5,
  pagination:true,//显示页码
  rownumbers:true,//序号
  collapsible :false,//是否可折叠的
  method:"get",
  columns:[
  [
  {
  title:"分类ID",
  field:"pid",
  align : 'center',
  sortable:true
  },
 
  {
  title:"分类名",
  field:"pname",
  align : 'center',
  sortable:true
  }
  ]
  ] 
  });
   
   
    // /偶尔被需要，从来不重要.
   
    $("#searcheUserBtn").linkbutton({//Btn点击事件
    iconCls:'icon-search',
    text:'开始搜索',
    onClick:search
    });
   
   
    var editIndex; // 判断用户是否处于编辑状态
    var flag; // 判断新增和修改方法


    function endEditing() {
    if (editIndex == undefined) {
    return true
    }
   
    //保存编辑内容
    if ($('#dg').datagrid('validateRow', editIndex)) {
    $('#dg').datagrid('endEdit', editIndex);
    editIndex = undefined;
    return true;
    } else {
    return false;
    }
    }


    // 添加一行
    function add() {
    if (editIndex == undefined) {
    flag = 'add';
    // 1 先取消所有的选中状态
    $('#dg').datagrid('unselectAll');
    // 2追加一行
    $('#dg').datagrid('appendRow', {
    description : ""
    });
    // 3获取当前页的行号
    editIndex =$('#dg').datagrid('getRows').length - 1;
    // 4开启编辑状态
    $('#dg').datagrid('beginEdit', editIndex);
    }
    }


   
    // 启动修改编辑
    function onClickCell(index) {
    if (endEditing()) {
    flag = 'update';
    $('#dg').datagrid('beginEdit', index);
    editIndex = index;
    }
    }


    // 保存编辑内容
    function accept() {
    if ($('#dg').datagrid('validateRow', editIndex)) {
    $('#dg').datagrid('endEdit', editIndex);
    editIndex = undefined;
    }
    }


    // 删除省份
    function remove() {
    var check = $('#dg').datagrid('getChecked');
    var pid = [];
    $.each(check, function(index, item) {
    pid.push(item.pid);
    });
    if (pid.join(",") == "") {
<%@ 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="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#myTree').tree({
url : 'tree_data1.json',
onClick : function(node) {

//判断是否存在该选项卡
//获取
var tab=$("#myTabs").tabs('getTab',node.text);
if(tab){
//有：让该选项卡被选中
$('#myTabs').tabs('select',node.text);
}else{
//没有：
//添加选项卡
//关键词
$('#myTabs').tabs('add',{    
   title:node.text,    
   href:'index.jsp',    
   closable:true,
   onLoad:function(){
    $("#account").textbox({
    prompt:"请输入你想要的关键词"
});
   
$("#addUserBtn").linkbutton({
iconCls:'icon-add',
text:'添加',
plain : true,
onClick:add
});

$("#updateUserBtn").linkbutton({
iconCls:'icon-edit',
text:'修改',
plain : true,
});

$("#removeUserBtn").linkbutton({
iconCls:'icon-remove',
text:'删除',
plain : true,
onClick : remove
});

$("#rejectUserBtn").linkbutton({
iconCls:'icon-no',
text:'取消',
plain : true,
onClick : cancel
});

$("#sxUserBtn").linkbutton({
iconCls:'icon-reload',
text:'刷新',
plain : true,
});


$("#dyUserBtn").linkbutton({
iconCls:'icon-print',
text:'打印',
plain : true,
});

$("#bzUserBtn").linkbutton({
iconCls:'icon-help',
text:'帮助',
plain : true,
});

$("#cxUserBtn").linkbutton({
iconCls:'icon-undo',
text:'撤销',
plain : true,
});

$("#czUserBtn").linkbutton({
iconCls:'icon-redo',
text:'重做',
plain : true,
});

$("#zjUserBtn").linkbutton({
iconCls:'icon-sum',
text:'总计',
plain : true,
});

$("#fhUserBtn").linkbutton({
iconCls:'icon-back',
text:'返回',
plain : true,
});

$("#tsUserBtn").linkbutton({
iconCls:'icon-tip',
text:'提示',
plain : true,
});

$("#acceptUserBtn").linkbutton({
iconCls:'icon-save',
text:'保存',
plain : true,
onClick : accept
});

$("#jxUserBtn").linkbutton({
iconCls:'icon-cut',
text:'剪切',
plain : true,
});

//起始时间
$("#qssj").datetimebox({
showSconeds:false
});

//结束时间
$("#jssj").datetimebox({
showSconeds:false
});

$("#assd").datetimebox({
showSconeds:false
});


//     $('#cc').combobox({  
//     prompt:"选择用户组",
//    url:'UserAll.do',    
//    valueField:'pid',    
//    textField:'pname',
//    onSelect:function(record){
//     console.info(record.pname);
//     $("#showProvince").html(record.pname);
//    }
// }); 


    $("#cc").combogrid({
    value:'选择用户组',
  panelWidth:488,
  url:"UserAll.do",
  idField: 'pid',//传过去的参数
  textField: 'pname',//在文本框显示的值
  pageList:[5,1,2,10,20],
  pageSize:5,
  pagination:true,//显示页码
  rownumbers:true,//序号
  collapsible :false,//是否可折叠的
  method:"get",
  columns:[
  [
  {
  title:"分类ID",
  field:"pid",
  align : 'center',
  sortable:true
  },
 
  {
  title:"分类名",
  field:"pname",
  align : 'center',
  sortable:true
  }
  ]
  ] 
  });
   
   
    $("#searcheUserBtn").linkbutton({//Btn点击事件
    iconCls:'icon-search',
    text:'开始搜索',
    onClick:search
    });
   
   
    var editIndex; // 判断用户是否处于编辑状态
    var flag; // 判断新增和修改方法


    function endEditing() {
    if (editIndex == undefined) {
    return true
    }
   
    //保存编辑内容
    if ($('#dg').datagrid('validateRow', editIndex)) {
    $('#dg').datagrid('endEdit', editIndex);
    editIndex = undefined;
    return true;
    } else {
    return false;
    }
    }


    // 添加一行
    function add() {
    if (editIndex == undefined) {
    flag = 'add';
    // 1 先取消所有的选中状态
    $('#dg').datagrid('unselectAll');
    // 2追加一行
    $('#dg').datagrid('appendRow', {
    description : ""
    });
    // 3获取当前页的行号
    editIndex = $('#dg').datagrid('getRows').length - 1;
    // 4开启编辑状态
    $('#dg').datagrid('beginEdit', editIndex);
    }
    }


   
    // 启动修改编辑
    function onClickCell(index) {
    if (endEditing()) {
    flag = 'update';
    $('#dg').datagrid('beginEdit', index);
    editIndex = index;
    }
    }


    // 保存编辑内容
    function accept() {
    if ($('#dg').datagrid('validateRow', editIndex)) {
    $('#dg').datagrid('endEdit', editIndex);
    editIndex = undefined;
    }
    }


    // 删除省份
    function remove() {
    var check = $('#dg').datagrid('getChecked');
    var pid = [];
    $.each(check, function(index, item) {
    pid.push(item.pid);
    });
    if (pid.join(",") == "") {
    $.messager.show({
    title : '提示信息',
    msg : '请选择要删除的省份内容!',
    });
    } else {
    $.ajax({
    url : 'UserDel.do',
    data : 'pid=' + pid,
    dataType : 'json',
    success : function(data) {
    if (data.success == 'success') {
    $("#dg").datagrid("reload");
    $.messager.show({
    title : '提示信息',
    msg : '省份删除成功!',
    });
    }
    }
    });
    }
    }
   
    // 取消编辑
    function cancel() {
    $('#dg').datagrid('rejectChanges');
    editIndex = undefined;
    }


    // 添加省份（编辑完成）
    function onAfterEdit(index, row, changes) {
    if (flag == 'add') {
    $.ajax({
    url : 'UserAdd.do',
    data : row,
    dataType : 'json',
    success : function(data) {
    if (data.success == 'success') {
    $("#dg").datagrid("reload");
    $.messager.show({
    title : '提示信息',
    msg : '省份添加成功!',
    });
    }
    }
    })
   
    //修改省份
    } else if (flag == 'update') {
    $.ajax({
    url : 'UserUpdate.do',
    data : row,
    dataType : 'json',
    success : function(data) {
    if (data.success == 'success') {
    $("#dg").datagrid("reload");
    $.messager.show({
    title : '提示信息',
    msg : '省份修改成功!',
    });
    }
    }
    })
    }
    }
   


  $("#dg").datagrid({
         collapsible: false,
  pagination : true,
  method : "get",
  toolbar : "#searchPanel",
  singleSelect : true,
  rownumbers:false,
  queryParams : {
  "key" : "val"
  },    
  resizable : true,
  onDblClickRow : onClickCell,// 分页事件
  pageSize : 5,
  pageList : [ 5, 1, 2, 10 ,20],
  remoteSort : false,
  singleSelect : true,
  url : 'UserAll.do',
  onAfterEdit : onAfterEdit,// 完成分页后
     striped:true,
   loadMsg:'正在为主人拼命加载中...',
   pagination:true,
  columns : [ [
  {
  field : "ck",
  checkbox : true,
  },{
  title:"编号",
  field:"pid",
  sortable:true,
  width : 100,
  align : 'center',
  },{
  title:"省份",
  field:"pname",
  sortable : true,
  width : 200,
  editor : {
  type : 'textbox',
  options : {
  missingMessage : '请填写省份内容!',
  required : true,
  }
  },
  align : 'center',
  }
  ] ]
  });
   
   
// $('#dg').datagrid({    
//    url:'combobox.do',
//    columns:[[    
//                                {field:'',title:'',checkbox:true,width:100},      
//       {field:'pid',title:'编号',width:100},    
//       {field:'pname',title:'省份',width:100}  
                                
//    ]],
//    striped:true,
//    loadMsg:'正在为主人拼命加载中...',
//    pagination:true,
//    singleSelect:true
// }); 


// $('#tt').tree({    
//    url:'tree_data1.json'   
// });  
   }
});
}
}
});




function search(){
var param = $("#account").textbox("getValue");
// var idField = $("#comboGrid").combogrid("getValue");

var queryObject = $("#dg").datagrid("options").queryParams;

queryObject.pname=param;

// queryObject.neirong= idField;
$("#dg").datagrid("options").queryParams =queryObject;

$("#dg").datagrid("reload");

}
});


</script>
</head>




<body class="easyui-layout">
<div data-options="region:'north'" style="height: 65px;">
<h1>EasyUI杨洋卖萌管理平台</h1>
</div>
<div data-options="region:'south',title:'South Title',split:true"
style="height: 100px;"></div>
<div                 
data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"
style="width: 100px;"></div>
<div data-options="region:'west',title:'导航菜单',split:true"
style="width: 150px;">
<div id="aa" class="easyui-accordion" style="width: 100%;">
<div title="快捷菜单" data-options="iconCls:'icon-save',selected:true"
style="overflow: auto; padding: 10px;">
<ul id="myTree"></ul>
</div>
<div title="内容管理" data-options="iconCls:'icon-large-smartart'"style="padding: 15px;"></div>
<div title="商品管理" data-options="iconCls:'icon-lock'" style="padding: 15px;" ></div>
<div title="订单管理" data-options="iconCls:'icon-man'" style="padding: 15px;"></div>
<div title="广告管理" data-options="iconCls:'icon-print'" style="padding: 15px;"></div>
<div title="报表中心" data-options="iconCls:'icon-no'" style="padding: 15px;"></div>
<div title="系统设置" data-options="iconCls:'icon-ok'"></div>

</div>
</div>
<div data-options="region:'center'"
style="background: #eee;">
<div id="myTabs" class="easyui-tabs" style="width:100%; height: 100%;">
<div title="首页" style="padding: 20px; display: none;">
             &nbsp;&nbsp;把圈子变小，把语言变干净，把成绩往上提，把故事往心里收一收，现在想要的以后都会有。
                        不断的努力，不断的去接近梦想，越挫越勇吃尽酸甜苦辣，能够抵御寒冬也能够拥抱春天，这样的才叫生活啊。别害怕遍体鳞伤，我相信总有一个人带着所有的真心实意出现在你的世界里，请你收拾好糟糕的心情，别让幸福来了遇到最糟糕的你。
                        你现在多学一样本事，就少说一句求人的话。我始终相信一句话：只有自己足够强大，才不会被别人践踏。
                        人生如梦，岁月无情。蓦然回首，才发现人活着是一种心情。穷也好，富也好，得也好，失也好。一切都是过眼云烟。想想，不管昨天、今天、明天，能豁然开朗就是美好的一天。不管亲情、友情、爱情，能永远珍惜就是好心情。
                        曾经拥有的不要忘记，已经得到的更加珍惜，属于自己的不要放弃，选择了就不要后悔，苦了才懂得满足，痛了才懂得享受生活。总有起风的清晨，总有绚烂的黄昏  总有流星的夜晚。
                       人生就像一张有去无回的单程车票，没有彩排，每一场都是现场直播把握好每次演出便是对人生最好的珍惜。
</div>
</div>
</div>


</body>
</html>          $.messager.show({
    title : '提示信息',
    msg : '请选择要删除的省份内容!',
      });
    } else {
    $.ajax({
    url : 'UserDel.do',
    data : 'pid=' + pid,
    dataType : 'json',
    success : function(data) {
    if (data.success == 'success') {
      $("#dg").datagrid("reload");
    $.messager.show({
    title : '提示信息',
    msg : '省份删除成功!',
    });
    }
      }
       });
         }
       }
   
    // 取消编辑
    function cancel() {
    $('#dg').datagrid('rejectChanges');
    editIndex = undefined;
    }


    // 添加省份（编辑完成）
    function onAfterEdit(index, row, changes) {
    if (flag == 'add') {
    $.ajax({
    url : 'UserAdd.do',
    data : row,
    dataType : 'json',
    success : function(data) {
    if (data.success == 'success') {
    $("#dg").datagrid("reload");
    $.messager.show({
    title : '提示信息',
    msg : '省份添加成功!',
    });
     }
      }
      })
   
    //修改省份
    } else if (flag == 'update') {
    $.ajax({
    url : 'UserUpdate.do',
    data : row,
    dataType : 'json',
    success : function(data) {
    if (data.success == 'success') {
      $("#dg").datagrid("reload");
    $.messager.show({
    title : '提示信息',
    msg : '省份修改成功!',
      });
    }
      }
      })
       }
        }
   


  $("#dg").datagrid({
         collapsible: false,
  pagination : true,
  method : "get",
  toolbar : "#searchPanel",
  singleSelect : true,
  rownumbers:false,
  queryParams : {
  "key" : "val"
  },    
  resizable : true,
  onDblClickRow : onClickCell,// 分页事件
  pageSize : 5,
  pageList : [ 5, 1, 2, 10 ,20],
  remoteSort : false,
  singleSelect : true,
  url : 'UserAll.do',
  onAfterEdit : onAfterEdit,// 完成分页后
     striped:true,
   loadMsg:'正在为主人拼命加载中...',
   pagination:true,
  columns : [ [
  {
  field : "ck",
  checkbox : true,
  },{
  title:"编号",
  field:"pid",
  sortable:true,
  width : 100,
  align : 'center',
  },{
  title:"省份",
  field:"pname",
  sortable : true,
  width : 200,
  editor : {
  type : 'textbox',
  options : {
  missingMessage : '请填写省份内容!',
  required : true,
  }
  },
  align : 'center',
  }
  ] ]
  });
   
   
// $('#dg').datagrid({    
//    url:'combobox.do',
//    columns:[[    
//                                {field:'',title:'',checkbox:true,width:100},      
//       {field:'pid',title:'编号',width:100},    
//       {field:'pname',title:'省份',width:100}  
                                
//    ]],
//    striped:true,
//    loadMsg:'正在为主人拼命加载中...',
//    pagination:true,
//    singleSelect:true
// }); 


// $('#tt').tree({    
//    url:'tree_data1.json'   
// });  
   }
});
}
}
});




function search(){
var param = $("#account").textbox("getValue");
// var idField = $("#comboGrid").combogrid("getValue");

var queryObject = $("#dg").datagrid("options").queryParams;

queryObject.pname=param;

// queryObject.neirong= idField;
$("#dg").datagrid("options").queryParams =queryObject;

$("#dg").datagrid("reload");

}
});
</script>
</head>


<body class="easyui-layout">
<div data-options="region:'north'" style="height: 65px;">
<h1>EasyUI杨洋卖萌管理平台</h1>
</div>
<div data-options="region:'south',title:'South Title',split:true"
style="height: 100px;"></div>
<div                 
data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"
style="width: 100px;"></div>
<div data-options="region:'west',title:'导航菜单',split:true"
style="width: 150px;">
<div id="aa" class="easyui-accordion" style="width: 100%;">
<div title="快捷菜单" data-options="iconCls:'icon-save',selected:true"
  style="overflow: auto; padding: 10px;">
  <ul id="myTree"></ul>
 </div>
     <div title="内容管理" data-options="iconCls:'icon-large-smartart'"style="padding: 15px;"></div>
<div title="商品管理" data-options="iconCls:'icon-lock'" style="padding: 15px;" ></div>
<div title="订单管理" data-options="iconCls:'icon-man'" style="padding: 15px;"></div>
<div title="广告管理" data-options="iconCls:'icon-print'" style="padding: 15px;"></div>
<div title="报表中心" data-options="iconCls:'icon-no'" style="padding: 15px;"></div>
<div title="系统设置" data-options="iconCls:'icon-ok'"></div>
  </div>
  </div>
<div data-options="region:'center'"
  style="background: #eee;">
  <div id="myTabs" class="easyui-tabs" style="width:100%; height: 100%;">
<div title="首页" style="padding: 20px; display: none;">
          &nbsp;&nbsp;把圈子变小，把语言变干净，把成绩往上提，把故事往心里收一收，现在想要的以后都会有。
                 不断的努力，不断的去接近梦想，越挫越勇吃尽酸甜苦辣，能够抵御寒冬也能够拥抱春天，这样的才叫生活啊。别害怕遍体鳞伤，我相信总有一个人带着所有的真心实意出现在你的世界里，请你收拾好糟糕的心情，别让幸福来了遇到最糟糕的你。
                 你现在多学一样本事，就少说一句求人的话。我始终相信一句话：只有自己足够强大，才不会被别人践踏。
                 人生如梦，岁月无情。蓦然回首，才发现人活着是一种心情。穷也好，富也好，得也好，失也好。一切都是过眼云烟。想想，不管昨天、今天、明天，能豁然开朗就是美好的一天。不管亲情、友情、爱情，能永远珍惜就是好心情。
                 曾经拥有的不要忘记，已经得到的更加珍惜，属于自己的不要放弃，选择了就不要后悔，苦了才懂得满足，痛了才懂得享受生活。总有起风的清晨，总有绚烂的黄昏  总有流星的夜晚。
                 人生就像一张有去无回的单程车票，没有彩排，每一场都是现场直播把握好每次演出便是对人生最好的珍惜。
</div>
 </div>
  </div>


</body>
</html>


  运行结果如下：

EasyUI一些布局（基本介绍）以及运行结果


EasyUI一些布局（基本介绍）以及运行结果


相关推荐