学习笔记 - EasyUI官方网站演示

EasyUI官方网站演示

撰写：2016/03/21
更新：2016/04/07
博客地址：http://www.cnblogs.com/gibbonnet/p/5362801.html
演示地址：http://www.jeasyui.com/tutorial/index.php

应用程序示例

使用jQuery EasyUI创建CURD应用)

• datagrid class="easyui-datagrid"
• dialog class="easyui-dialog"
• form
• messager $.messager.show

创建可以编辑的表格

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
指定列的编辑器
editor="{type:'validatebox',options:{required:true}}"
指定载入数据、保存、更新、删除操作的服务器路径

$('#dg').edatagrid({
    url: 'get_users.php',
    saveUrl: 'save_user.php',
    updateUrl: 'update_user.php',
    destroyUrl: 'destroy_user.php'
});

创建RSS阅读器

• layout 布局器 class="easyui-layout"
• datagrid 表格 $('#dg').datagrid
• tree 树 $('#t-channels').tree

布局器

region="north" border="false"
region="west"
region="center"

表格事件

onSelect 选择事件
onLoadSuccess 数据载入成功后事件

树

onSelect 选择事件
onLoadSuccess 数据载入成功后事件

树演示 TreeGrid

演示地址：http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=

基本使用

<table title="Fluid Browser" class="easyui-treegrid" style="width:700px;height:250px"
       data-options="
                     url: 'treegrid_data1.json',
                     method: 'get',
                     idField: 'id',
                     treeField: 'name'
                     ">
<thead>
  <tr>
    <th data-options="field:'name'" width="50%">Name(50%)</th>
    <th data-options="field:'size'" width="20%" align="right">Size(20%)</th>
    <th data-options="field:'date'" width="30%">Modified Date(30%)</th>
  </tr>
</thead>
</table>

增加连线 lines: true

显示合计行 showFooter:true

表格动作

允许折叠 collapsible: true,

全部折叠 $('#tg').treegrid('collapseAll');

全部展开 $('#tg').treegrid('collapseAll');

展开到指定节点 $('#tg').treegrid('expandTo',21).treegrid('select',21);

复选框

属性设置 checkbox: true,

定制复选框

checkbox: function(row){
    var names = ['Java','eclipse.exe','eclipse.ini'];
    if ($.inArray(row.name, names)>=0){
        return true;
    }
}

上下文菜单

属性：onContextMenu: onContextMenu

显示菜单

function onContextMenu(e,row){
    if (row){
        e.preventDefault();
        $(this).treegrid('select', row.id);
        $('#mm').menu('show',{
            left: e.pageX,
            top: e.pageY
        });                
    }
}

定义菜单

<div id="mm" class="easyui-menu" style="width:120px;">
  <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
  <div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
  <div class="menu-sep"></div>
  <div onclick="collapse()">Collapse</div>
  <div onclick="expand()">Expand</div>
</div>

定义动作

function removeIt(){
    var node = $('#tg').treegrid('getSelected');
    if (node){
        $('#tg').treegrid('remove', node.id);
    }
}
function collapse(){
    var node = $('#tg').treegrid('getSelected');
    if (node){
        $('#tg').treegrid('collapse', node.id);
    }
}
function expand(){
    var node = $('#tg').treegrid('getSelected');
    if (node){
        $('#tg').treegrid('expand', node.id);
    }
}

可编辑表格

开始编辑

var row = $('#tg').treegrid('getSelected');
editingId = row.id
$('#tg').treegrid('beginEdit', editingId);

结束编辑

$('#tg').treegrid('beginEdit', editingId);

取消编辑

$('#tg').treegrid('cancelEdit', editingId);

复杂的表格

合并列，合并行

<table title="Reports using TreeGrid" class="easyui-treegrid" style="width:700px;height:250px"
        data-options="
            url: 'treegrid_data3.json',
            method: 'get',
            rownumbers: true,
            showFooter: true,
            idField: 'id',
            treeField: 'region'
        ">
    <thead frozen="true">
        <tr>
            <th field="region" width="200">Region</th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th colspan="4">2009</th>
            <th colspan="4">2010</th>
        </tr>
        <tr>
            <th field="f1" width="60" align="right">1st qrt.</th>
            <th field="f2" width="60" align="right">2st qrt.</th>
            <th field="f3" width="60" align="right">3st qrt.</th>
            <th field="f4" width="60" align="right">4st qrt.</th>
            <th field="f5" width="60" align="right">1st qrt.</th>
            <th field="f6" width="60" align="right">2st qrt.</th>
            <th field="f7" width="60" align="right">3st qrt.</th>
            <th field="f8" width="60" align="right">4st qrt.</th>
        </tr>
    </thead>
</table>

参考文档

http://www.jeasyui.com/documentation/index.php#

转载于:https://www.cnblogs.com/gibbonnet/p/5362801.html