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

随机推荐

[操作系统] OS X Yosemite U盘制作
话不多说,DiskMakerX,大小6.3M,下载地址:http://www.liondiskmaker.com/,然后准备好U盘和从官网下的Yosemite系统就可以开始了. DiskMaker X ...
selenium webdriver python 操作IE浏览器
Step1:下载IEDriverServer 下载路径:http://selenium-release.storage.googleapis.com/index.html 我下载的是2.48版本的IE ...
maven上传自定义jar到本地仓库
mvn install:install-file -Dfile=D:/baidu/ueditor-1.1.1.jar -DgroupId=com.baidu.ueditor -Dartifact ...
hdu 1106 排序
排序 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...
Android Activity启动模式
<activity android:name=".MainActivity" android:launchMode="singleTask"> &l ...
从 Kubernetes 谈容器网络
基本概念在 Kubernetes 中.资源从管理粒度上分为三级:容器.Pod.Service. 容器即 Docker 或者 Rocket 容器(1.0 中仅支持这两种容器). 容器是最低粒度的资源 ...
adb出现adb server is out of date时的解决的方法
出错的原因是adb的port被其它程序的进程占据了,所以要做的就是找到并kill该进程.步骤:. 1.在cmd中运行adb nodaemon server,查看adb的port号是多少,普通情况下是5 ...
[Angular 2] @ngrx/devtools demo
Check the Github: https://github.com/ngrx/devtools Example:
AS 7 Internal Architecture Overview--reference
High Level Overview At a coarse level, AS 7 consists of two main elements: A core manageable service ...
Weibo SSO认证和初次请求数据
在进行SSO请求之前我们要先去新浪微博的开放平台http://open.weibo.com/进行创建应用.以便得到appKey 和AppSecret. 点击创建应用 .进行资料填写在这里 App ...

jquery easy ui 学习 （7） TreeGrid Actions

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

随机推荐

热门专题

jquery easy ui 学习（7） TreeGrid Actions

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