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 ...

随机推荐

HDOJ(HDU) 2136 Largest prime factor(素数筛选)
Problem Description Everybody knows any number can be combined by the prime number. Now, your task i ...
url找不到指定位置
刚才遇到了把css装入一个文件夹下,然后有的图片失效了. 后来解决是在.css里把./images 换成 ../images 原来css找图片的地址是基于自身.css文件的位置寻找的,不是以引用它的. ...
使用Dreamwaver cc中的SVN功能，用于传输BAE和SAE中的文件
前沿: 假期使用BAE和SAE开发应用,两个服务器都需要通过SVN提交代码,因为平时大多使用Dreamwaver,所以查了查资料,通过Subversion方便了开发. 因为网上的资料都不全,所以根据自 ...
Queueing in the Linux Network Stack !!!!!!!!!!!!!!!
https://www.coverfire.com/articles/queueing-in-the-linux-network-stack/ Queueing in the Linux Networ ...
Change value of string array at debug eclipse--转
Question: I have an application, but to test something, I need to change value of a String[]. But wh ...
SpringMVC中文乱码
刚刚构建的SpringMVC项目,一般都是中文乱码的. 这时的工程就是一个JSP页面的事情,可以添加如下代码 <%@ page language="java" import= ...
service redis does not support chkconfig的解决办法
原文链接: http://my.oschina.net/maczhao/blog/322931 问题解决办法如下: 必须把下面两行注释放在/etc/init.d/redis文件靠前的注释中: # ch ...
【原创】FAT32系统硬盘的数据恢复实例，这篇文章也是从自己QQ空间的，转移过来的
FAT32系统硬盘的数据恢复实例软件:win hex(16进制的编辑器)恢复内容:在FAT32中恢复一张图片1.首先我们格式化一个分区为空,让分区的系统选为FAT32系统格式化.如下: psb.jpg ...
Android 设计模式之观察者模式（转载自：“http://blog.csdn.net/fangchongbory/article/details/7774044”）
/* * 观察者模式 * 定义对象间的一种一个(Subject)对多(Observer)的依赖关系,当一个对象的状态发送改变时,所以依赖于它的 * 对象都得到通知并被自动更新 * * 当然, ...
Linux编程之定制带级别的log
我的开发组长曾经说过这么一段话"一个优秀的程序员不在于他写代码有多快,也不在于他能不能实现这个模块的功能,要实现业务实现功能谁不会啊,重要的是他的解决能力,也就说当程序出现错误时你能不能够快 ...

jquery easy ui 学习 （7） TreeGrid Actions

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

随机推荐

热门专题

jquery easy ui 学习（7） TreeGrid Actions

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