EasyUI使用教程
使用EasyUI必须导入其js以及css等.
1. (l)list界面
效果图:
图1
a) 首先界面布局,这里用jsp为例
<table id="dg" title="人员信息" class="easyui-datagrid" url="/easyui/getUsers"toolbar="#toolbar" pagination="true"rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="nick_name" width="50">姓名</th>
<th field="wx_open_id" width="50">电话</th>
<th field="address" width="50">邮箱</th>
</tr>
</thead>
</table>
note: url是想那个地址请求数据,pagination:是否显示分页.fitColumns是否自动使用宽度,singleSelect是否可以多选
关于<th>中的field的值,必须和数据库中你要显示的字段名相同.
b) 添加/删除/修改等事件
增加效果图(其他略):
图2
按钮定义
<div id="toolbar">
<a href="javascript:void(0)" title="添加用户" class="easyui-linkbutton easyui-tooltip" iconCls="icon-add" plain="true" onclick="newUser();">添加</a>
<a href="javascript:void(0)" title="修改用户" class="easyui-linkbutton easyui-tooltip"  iconCls="icon-edit" plain="true" onclick="editUser();">编辑</a>
<a href="javascript:void(0)" title="删除用户" class="easyui-linkbutton easyui-tooltip" iconCls="icon-remove" plain="true" onclick="destroyUser();">删除</a>
<a href="javascript:void(0)" title="刷新" class="easyui-linkbutton easyui-tooltip"  iconCls="icon-reload" plain="true" onclick="reload();">刷新</a>
</div>
其中主要是js事件:newUser()
var url;
  function newUser(){
      $('#dlg').dialog('open').dialog('setTitle','新增用户');
      $('#fm').form('clear');
      url = '/easyui/saveUser';
  };
function saveUser(){
      $('#fm').form('submit',{
          url: url,
          onSubmit: function(){
              return $(this).form('validate');
              },
          success: function(result){
              var result = eval('('+result+')');
              if (Msg){
                  $.messager.show({
                      title: 'Error',
                      msg: Msg
                  });
              } else {
                  $('#dlg').dialog('close');        // close the dialog
                  $('#dg').datagrid('reload');    // reload the user data
              }
          }
      });
  };
这样即可
c) 分页:效果同上上图
图3
页面此table页面简单代码:
其中pagiination=”true”设置有分页.实现分页的js代码为:
//此处采用url的方法获取数据,所以此方法可以删除
        function getData(){ }
        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);
                },onRefresh:function(pageNum, pageSize){
                    $('#dg').datagrid('reload');
                }
            });
            if (!iginalRows){
                iginalRows = (ws);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            ws = (iginalRows.slice(start, end));
            return data;
        }
        $(function(){
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });
note:开始时,点击分页栏中的刷新按钮不管用,一看忘记了实现onRefresh方法.具体剩下的方法看文档:www.jeasyui/documentation/index.php
在线demo:www.jeasyui/demo/main/index.php
d) 后台处理easyui/getUsers的实现:
public void getUsers(){
        List<User> users =  User.dao.find("select * from user order by id desc");
        renderJson(users);
    }
我们前台需要的是Json格式数据,在这里用jfinal很容易实现.这样即可.
e)
f)
2. 初始化菜单导航栏:
开始时,采用直接在jsp页面中 添加代码的方式,但是为了以后配置的方便,改成了读取Json格式数据,动态创建菜单的方法:数据展示:
var _panels = {"panels":[
                        {"panelid":"12","icon":"icon-sys","panelname":"平台管理模块",
                            "menus":[{"menuname":"企业用户管理","icon":"icon-tip","tabId":"guanwang1","url":"localhost/easyui/basicCrud"},
                        ]};
php实例代码教程
那么通过js读取出来,动态添加到导航菜单中,js:
//初始化菜单
function InitLeftMenu() {
    $(".easyui-accordion").empty();
    //先列菜单
    $.each(_panels.panels, function(i, n) {
    var menulist = "";
    var template = new t("<ui><div><a url='{{=url}}' href='javascript:void(0)' iconCls='{{=icon}}' tabId='{{=tabId}}'  class='easyui-linkbutton' data-options='plain:true'>{{=menuname}}</a></div></ui>");
    menulist += '<ul>';
        //继续下个元素
        $.us, function(j, o) {
    menulist += '<div title="'+o.menuname+'">';
            menulist += der(o);
        });
        menulist += '</ul></div>';
        $('#leftmenu').accordion('add',{
            title:n.panelname,
            content:menulist
        });
    })
    $('.easyui-accordion ui a').click(function(){
        var tabTitle = $(this).text();
        var url = $(this).attr("url");
        var tabId = $(this).attr("tabId");
        addTab(tabId,tabTitle,url);
        $('.easyui-accordion ui div').removeClass("selected");
        $(this).parent().addClass("selected");
    }).hover(function(){
        $(this).parent().addClass("hover");
    },function(){
        $(this).parent().removeClass("hover");
    });
    $(".easyui-accordion").accordion();
}
里面有个addTab(tabId,title,url)的方法,他的作用是在主MainFrame中添加tab
//增加tab
function addTab(tabId,title,url){
        //如果当前id的tab不存在则创建一个tab
        if(!$('#tabs').tabs('exists',title)){
            $('#tabs').tabs('add',{
                title: title,       
                closable:true,
                cache : false,
                //注：使用iframe即可防止同一个页面出现js和css冲突的问题
                content : '<iframe name="mainFrame'+tabId+'" src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
            });
            progress();
        }else{
            //如果存在,那么切换到此tab
            $('#tabs').tabs('select',title);
            return ;
        }
        tabClose();
    }
然后就可以了.
还有些双击关闭等功能:参考实例代码.
3. 累死了,先回去睡觉去.
4. d
5. d
6. dd
7.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。