EasyUI Demo（子页面）_easyui打开子页面-CSDN博客

本文链接：https://blog.csdn.net/sinat_40900884/article/details/84136660

<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
<ul id="wu-category-tree" class="easyui-tree"></ul>
</div>
<div data-options="region:'center',border:false">
   
<div id="wu-toolbar">
<div class="wu-toolbar-button">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" οnclick="openAdd()" plain="true">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" οnclick="openEdit()" plain="true">修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" οnclick="remove()" plain="true">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="cancel()" plain="true">取消</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" οnclick="reload()" plain="true">刷新</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-print" οnclick="openAdd()" plain="true">打印</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-help" οnclick="openEdit()" plain="true">帮助</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" οnclick="remove()" plain="true">撤销</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-redo" οnclick="cancel()" plain="true">重做</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-sum" οnclick="reload()" plain="true">总计</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-back" οnclick="reload()" plain="true">返回</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-tip" οnclick="reload()" plain="true">提示</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" οnclick="reload()" plain="true">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" οnclick="reload()" plain="true">剪切</a>
</div>
<div class="wu-toolbar-search">
<label>起始时间：</label><input class="easyui-datebox" style="width:100px">
<label>结束时间：</label><input class="easyui-datebox" style="width:100px">
<label>用户组：</label>
<select class="easyui-combobox" panelHeight="auto" style="width:100px">
<option value="0">选择用户组</option>
<option value="1">黄钻</option>
<option value="2">红钻</option>
<option value="3">蓝钻</option>
</select>
<label>关键词：</label><input class="wu-text" style="width:100px">
<a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
</div>
</div>

<table id="wu-datagrid" toolbar="#wu-toolbar"></table>
</div>
</div>

<div id="wu-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
   <form id="wu-form" method="post">
<table>
<tr>
<td width="60" align="right">姓名:</td>
<td><input type="text" name="name" class="wu-text" /></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><input type="text" name="email" class="wu-text" /></td>
</tr>
<tr>
<td align="right">主题:</td>
<td><input type="text" name="subject" class="wu-text" /></td>
</tr>
<tr>
<td valign="top" align="right">内容:</td>
<td><textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
</tr>
</table>
</form>
</div>

<script type="text/javascript">
   /**
   * Name 载入菜单树
   */
   $('#wu-category-tree').tree({
       url:'temp/menu.php',
       onClick:function(node){
           alert(node.text);
       }
   });

   /**
   * Name 添加记录
   */
   function add(){
       $('#wu-form').form('submit', {
           url:'',
           success:function(data){
               if(data){
                   $.messager.alert('信息提示','提交成功！','info');
                   $('#wu-dialog').dialog('close');
               }
               else
               {
                   $.messager.alert('信息提示','提交失败！','info');
               }
           }
       });
   }

   /**
   * Name 修改记录
   */
   function edit(){
       $('#wu-form').form('submit', {
           url:'',
           success:function(data){
               if(data){
                   $.messager.alert('信息提示','提交成功！','info');
                   $('#wu-dialog').dialog('close');
               }
               else
               {
                   $.messager.alert('信息提示','提交失败！','info');
               }
           }
       });
   }

   /**
   * Name 删除记录
   */
   function remove(){
       $.messager.confirm('信息提示','确定要删除该记录？', function(result){
           if(result){
               var items = $('#wu-datagrid').datagrid('getSelections');
               var ids = [];
               $(items).each(function(){
                   ids.push(this.productid);
               });
               //alert(ids);return;
               $.ajax({
                   url:'',
                   data:'',
                   success:function(data){
                       if(data){
                           $.messager.alert('信息提示','删除成功！','info');
                       }
                       else
                       {
                           $.messager.alert('信息提示','删除失败！','info');
                       }
                   }
               });
           }
       });
   }

   /**
   * Name 打开添加窗口
   */
   function openAdd(){
       $('#wu-form').form('clear');
       $('#wu-dialog').dialog({
           closed: false,
           modal:true,
title: "添加信息",
buttons: [{
text: '确定',
iconCls: 'icon-ok',
handler: add
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#wu-dialog').dialog('close');
}
}]
});
   }

   /**
   * Name 打开修改窗口
   */
   function openEdit(){
       $('#wu-form').form('clear');
       var item = $('#wu-datagrid').datagrid('getSelected');
       //alert(item.productid);return;
       $.ajax({
           url:'',
           data:'',
           success:function(data){
               if(data){
                   $('#wu-dialog').dialog('close');
               }
               else{
                   //绑定值
                   $('#wu-form').form('load', data)
               }
           }
       });
       $('#wu-dialog').dialog({
           closed: false,
           modal:true,
title: "修改信息",
buttons: [{
text: '确定',
iconCls: 'icon-ok',
handler: edit
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#wu-dialog').dialog('close');
}
}]
});
   }

   /**
   * Name 分页过滤器
   */
   function pagerFilter(data){
       if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
           data = {
               total: data.length,
               rows: data
           }
       }
       var dg = $(this);
       var opts = dg.datagrid('options');
       var pager = dg.datagrid('getPager');
       pager.pagination({
           onSelectPage:function(pageNum, pageSize){
               opts.pageNumber = pageNum;
               opts.pageSize = pageSize;
               pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
               dg.datagrid('loadData',data);
           }
       });
       if (!data.originalRows){
           data.originalRows = (data.rows);
       }
       var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
       var end = start + parseInt(opts.pageSize);
       data.rows = (data.originalRows.slice(start, end));
       return data;
   }

   /**
   * Name 载入数据
   */
   $('#wu-datagrid').datagrid({
       url:'temp/datagrid.php',
       loadFilter:pagerFilter,
       rownumbers:true,
       singleSelect:false,
       pageSize:20,
       pagination:true,
       multiSort:true,
       fitColumns:true,
       fit:true,
       columns:[[
           { checkbox:true},
           { field:'productid',title:'productid',width:100,sortable:true},
           { field:'productname',title:'productname',width:180,sortable:true},
           { field:'unitcost',title:'unitcost',width:100},
           { field:'listprice',title:'listprice',width:100},
           { field:'attr1',title:'attr1',width:100},
           { field:'itemid',title:'itemid',width:100},
           { field:'status',title:'status',width:100}
       ]]
   });
</script>