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

随机推荐

QTP自传之录制
录制,是一件吃力不讨好的活.很多人以为录制就是我的主要甚至全部的功能,这是大错特错的.不过,录制功能却是不熟悉我的人了解我的有效途径,是大家学习的有力武器.今天就先从录制功能说起吧. 说到录制,就不得 ...
SPJ 讨论
设有一个SPJ数据库,包括S,P,J,SPJ四个关系模式: S( SNO,SNAME,STATUS,CITY): P(PNO,PNAME,COLOR,WEIGHT): J(JNO,JNAME,CITY ...
C++递归求解N个元素的所有子集
C++递归求解N个元素的所有子集引言: 我在复习C++遇到了设计递归函数的问题.这个例子,很好的显示了设计递归的方式,思想. 这与斐波那数列不同,这个例子更有应用意义. 问题: 试编写一个递归函数, ...
金牌分析师助力鲁泰A图谋再造一个“鲁泰”？_财经_中国网
金牌分析师助力鲁泰A图谋再造一个"鲁泰"?_财经_中国网金牌分析师助力鲁泰A图谋再造一个"鲁泰"?
安装完sql server 后修改计算机名后不能进行发布的订阅的解决办法
由于需要需要配置一个发布订阅,可是一直报告:" sql server 复制需要有实际的服务器名称才能连接到服务器,不支持通过别名.ip地址或其他任何备用名称进行连接.请指定实际的服务器名称“ ...
mysql主从复制详解
转自 http://blog.csdn.net/m582445672/article/details/7731565 实践: http://shiyanjun.cn/archives/584.html ...
2016最新cocoapods版本更新，以及多个版本的问题
先删除之前的pod 在终端中执行下面命令. 删除目录下的podrm -rf /usr/local/bin/pod 执行gem list | grep cocoapods 查看所有与cocoapods相 ...
Android系统中设置TextView的行间距（非行高）
Android系统中TextView默认显示中文时会比较紧凑,不是很美观.为了让每行保持一定的行间距,可以设置属性android:lineSpacingExtra或android:lineSpacin ...
DTD简单使用
DTD:Document Type Definition DTD是一种简单的XML约束模式语言 DTD文档必须以utf-8或unicode编码注释方式与HTML.XML文档相同 DTD文档的引用:紧 ...
linux sysvinit与upstart [转]
linux sysvinit与upstart(1) linux sysvinit与upstart(2) linux sysvinit与upstart(3)

jquery easy ui 学习 （7） TreeGrid Actions

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

随机推荐

热门专题

jquery easy ui 学习（7） TreeGrid Actions

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