jquery easy ui 学习（7） TreeGrid Actions

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>TreeGrid Actions - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>TreeGrid Actions</h2>

    <p>Click the buttons below to perform actions.</p>

    <div style="margin:20px 0;">

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>

    </div>

    <table id="tg" class="easyui-treegrid" title="TreeGrid Actions" style="width:700px;height:250px"

            data-options="

                iconCls: 'icon-ok',

                rownumbers: true,

                animate: true,

                collapsible: true,

                fitColumns: true,

                url: 'treegrid_data2.json',

                method: 'get',

                idField: 'id',

                treeField: 'name'

            ">

        <thead>

            <tr>

                <th data-options="field:'name',width:180">Task Name</th>

                <th data-options="field:'persons',width:60,align:'right'">Persons</th>

                <th data-options="field:'begin',width:80">Begin Date</th>

                <th data-options="field:'end',width:80">End Date</th>

                <th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>

            </tr>

        </thead>

    </table>

    <script type="text/javascript">

        function formatProgress(value){

            if (value){

                var s = '<div style="width:100%;border:1px solid #ccc">' +

                        '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'

                        '</div>';

                return s;

            } else {

                return '';

            }

        }

        function collapseAll(){

            $('#tg').treegrid('collapseAll');

        }

        function expandAll(){

            $('#tg').treegrid('expandAll');

        }

        function expandTo(){

            $('#tg').treegrid('expandTo',21).treegrid('select',21);

        }

    </script>

</body>

</html>

json文件

{"total":,"rows":[

    {"id":,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":,"iconCls":"icon-ok"},

    {"id":,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":,"_parentId":,"state":"closed"},

    {"id":,"name":"Database","persons":,"begin":"3/4/2010","end":"3/6/2010","progress":,"_parentId":},

    {"id":,"name":"UML","persons":,"begin":"3/7/2010","end":"3/8/2010","progress":,"_parentId":},

    {"id":,"name":"Export Document","persons":,"begin":"3/9/2010","end":"3/10/2010","progress":,"_parentId":},

    {"id":,"name":"Coding","persons":,"begin":"3/11/2010","end":"3/18/2010","progress":},

    {"id":,"name":"Testing","persons":,"begin":"3/19/2010","end":"3/20/2010","progress":}

],"footer":[

    {"name":"Total Persons:","persons":,"iconCls":"icon-sum"}

]}

jquery easy ui 学习（7） TreeGrid Actions的更多相关文章

jquery easy ui 学习（9）Pagination in TreeGrid 分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（8）basic treegrid
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（6） basic validatebox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（2） customtools window
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（5） windowlayout
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（4） window 打开之后限制操纵后面元素属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（3） window 限制在父类窗体内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery easy ui 学习（1）Basic Window
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Jquery easy UI 上中下三栏布局分类： ASP.NET 2015-02-06 09:19 368人阅读评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

C#调用webservers实现天气预报
一:截图二:实现步骤 1.引入Web服务.在VS中项目上右击→添加服务引用. 2.在弹出的添加服务引用窗口,录入web服务地址和引用后的命名空间. 三:源代码 using System; using ...
wamp中的httpd.conf文件设置
ServerName localhost 缺省情况下,并不需要指定这个ServerName参数,服务器将自动通过名字解析过程来获得自己的名字,但如果服务器的名字解析有问题(通常为反向解析不正确),或者 ...
Java IO流以及装饰器模式在其上的运用
流概述 Java中,流是一种有序的字节序列,可以有任意的长度.从应用流向目的地称为输出流,从目的地流向应用称为输入流. Java的流族谱 Java的 java.io 包中囊括了整个流的家族,输出流和输 ...
优化exp/imp导入导出速度大全
.exp 个相关的参数:DIRECT和RECORDLENGTH参数. DIRECT参数定义了导出是使用直接路径方式(DIRECT=Y),还是常规路径方式(DIRECT=N).常规路径导出使用SQL ...
IOS UIView 之属性篇
UIView 继承于UIResponder 所遵守的协议有 NSCoding .UIAppearance. UIAppearanceContainer ...
web系统架构的演进变化很形象
随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构当网站流量很小时,只需一个应用, ...
[Flexbox] Using order to rearrange flexbox children
Using the order property we alter the order in which flexbox children appear on the page, without ma ...
Java基础知识强化之IO流笔记06：有return的情况下try catch finally的执行顺序
1. 给出结论: (1)不管有木有出现异常,finally块中代码都会执行:(2)当try和catch中有return时,finally仍然会执行:(3)finally是在return后面的表达式运算 ...
ASP.NET数据报表之柱状图 ------工作日志
#region 柱形色调 /// <summary> /// 柱形色调 /// </summary> private string[] myColor = new string ...
HTML-点击收藏功能模块
先上效果图: 功能简单: 附上源码以及注解 <div class="info-attribute" id="collect"> <input ...

jquery easy ui 学习 （7） TreeGrid Actions

jquery easy ui 学习 （7） TreeGrid Actions的更多相关文章

随机推荐

热门专题

jquery easy ui 学习（7） TreeGrid Actions

jquery easy ui 学习（7） TreeGrid Actions的更多相关文章