Commit 76a0033a authored by 季圣华's avatar 季圣华
Browse files

清空旧版本

parent df57ada9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Tooltip Content - 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>Custom Tooltip Content</h2>
<p>Access to each elements attribute to get the tooltip content.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel">
<div id="pg" data-options="total:114"></div>
</div>
<script>
$(function(){
$('#pg').pagination().find('a.l-btn').tooltip({
content: function(){
var cc = $(this).find('span.l-btn-icon').attr('class').split(' ');
var icon = cc[1].split('-')[1];
return icon + ' page';
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Tooltip Style - 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>Custom Tooltip Style</h2>
<p>This sample shows how to change the tooltip style.</p>
<div style="margin:s0px 0;"></div>
<div style="padding:10px 200px">
<div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
</div>
<div style="padding:10px 200px">
<div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
</div>
<script>
$(function(){
$('#pp1').tooltip({
position: 'right',
content: '<span style="color:#fff">This is the tooltip message.</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});
$('#pp2').tooltip({
position: 'bottom',
content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#fff000',
borderColor: '#ff0000',
boxShadow: '1px 1px 3px #292929'
});
},
onPosition: function(){
$(this).tooltip('tip').css('left', $(this).offset().left);
$(this).tooltip('arrow').css('left', 20);
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip Position - 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>Tooltip Position</h2>
<p>Click the drop-down list below to change where the tooltip appears.</p>
<div style="margin:20px 0;"></div>
<span>Select position:</span>
<select onchange="changePosition(this.value)">
<option value="bottom">Bottom</option>
<option value="top">Top</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
<div style="padding:10px 200px">
<div id="pp" class="easyui-panel easyui-tooltip" title="This is the tooltip message." style="width:100px;padding:5px">Hover Me</div>
</div>
<script type="text/javascript">
function changePosition(pos){
$('#pp').tooltip({
position: pos
});
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip as Toolbar - 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>Tooltip as Toolbar</h2>
<p>This sample shows how to create a tooltip style toolbar.</p>
<div style="margin:20px 0;"></div>
<div style="padding:10px 200px">
<p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="
hideEvent: 'none',
content: function(){
return $('#toolbar');
},
onShow: function(){
var t = $(this);
t.tooltip('tip').focus().unbind().bind('blur',function(){
t.tooltip('hide');
});
}
">Hover me</a> to display toolbar.</p>
</div>
<div style="display:none">
<div id="toolbar">
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Add" data-options="iconCls:'icon-add',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Cut" data-options="iconCls:'icon-cut',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Remove" data-options="iconCls:'icon-remove',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Undo" data-options="iconCls:'icon-undo',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Redo" data-options="iconCls:'icon-redo',plain:true"></a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip Dialog - 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>Tooltip Dialog</h2>
<p>This sample shows how to create a tooltip dialog.</p>
<div style="margin:20px 0;"></div>
<div style="padding:10px 200px">
<p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog.
</div>
<script>
$(function(){
$('#dd').tooltip({
content: $('<div></div>'),
showEvent: 'click',
onUpdate: function(content){
content.panel({
width: 200,
border: false,
title: 'Login',
href: '_dialog.html'
});
},
onShow: function(){
var t = $(this);
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
}
});
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree 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>Tree Actions</h2>
<p>Click the buttons below to perform actions.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
<a href="#" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
<a href="#" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
</div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<script type="text/javascript">
function collapseAll(){
$('#tt').tree('collapseAll');
}
function expandAll(){
$('#tt').tree('expandAll');
}
function expandTo(){
var node = $('#tt').tree('find',113);
$('#tt').tree('expandTo', node.target).tree('select', node.target);
}
function getSelected(){
var node = $('#tt').tree('getSelected');
if (node){
var s = node.text;
if (node.attributes){
s += ","+node.attributes.p1+","+node.attributes.p2;
}
alert(s);
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Tree - 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>Animation Tree</h2>
<p>Apply 'animate' property to true to enable animation effect.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tree - 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>Basic Tree</h2>
<p>Click the arrow on the left to expand or collapse nodes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CheckBox Tree - 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>CheckBox Tree</h2>
<p>Tree nodes with check boxes.</p>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="getChecked()">GetChecked</a>
</div>
<div style="margin:10px 0">
<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck
<input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
</div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,checkbox:true"></ul>
</div>
<script type="text/javascript">
function getChecked(){
var nodes = $('#tt').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Context Menu - 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>Tree Context Menu</h2>
<p>Right click on a node to display context menu.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
animate: true,
onContextMenu: function(e,node){
e.preventDefault();
$(this).tree('select',node.target);
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
"></ul>
</div>
<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="expand()">Expand</div>
<div onclick="collapse()">Collapse</div>
</div>
<script type="text/javascript">
function append(){
var t = $('#tt');
var node = t.tree('getSelected');
t.tree('append', {
parent: (node?node.target:null),
data: [{
text: 'new item1'
},{
text: 'new item2'
}]
});
}
function removeit(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('remove', node.target);
}
function collapse(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('collapse',node.target);
}
function expand(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('expand',node.target);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom CheckBox Tree - 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>Custom CheckBox Tree</h2>
<p>Tree nodes with customized check boxes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="
url:'tree_data1.json',
method:'get',
animate:true,
checkbox:function(node){
if (node.id == 11 || node.id == 122){
return true;
}
}
"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag Drop Tree Nodes - 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>Drag Drop Tree Nodes</h2>
<p>Press mouse down and drag a node to another position.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Editable Tree - 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>Editable Tree</h2>
<p>Click the node to begin edit, press enter key to stop edit or esc key to cancel edit.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
animate: true,
onClick: function(node){
$(this).tree('beginEdit',node.target);
}
"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formatting Tree Nodes - 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>Formatting Tree Nodes</h2>
<p>This example shows how to display extra information on nodes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="
url:'tree_data1.json',
method:'get',
animate:true,
formatter:function(node){
var s = node.text;
if (node.children){
s += '&nbsp;<span style=\'color:blue\'>(' + node.children.length + ')</span>';
}
return s;
}
">
</ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Node Icons - 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>Tree Node Icons</h2>
<p>This sample illustrates how to add icons to tree node.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data2.json',method:'get',animate:true"></ul>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazy Load Tree Nodes - 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>Lazy Load Tree Nodes</h2>
<p>Get full hierarchical tree data but lazy load nodes level by level.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul>
</div>
<script>
function myLoadFilter(data, parent){
var state = $.data(this, 'tree');
function setData(){
var serno = 1;
var todo = [];
for(var i=0; i<data.length; i++){
todo.push(data[i]);
}
while(todo.length){
var node = todo.shift();
if (node.id == undefined){
node.id = '_node_' + (serno++);
}
if (node.children){
node.state = 'closed';
node.children1 = node.children;
node.children = undefined;
todo = todo.concat(node.children1);
}
}
state.tdata = data;
}
function find(id){
var data = state.tdata;
var cc = [data];
while(cc.length){
var c = cc.shift();
for(var i=0; i<c.length; i++){
var node = c[i];
if (node.id == id){
return node;
} else if (node.children1){
cc.push(node.children1);
}
}
}
return null;
}
setData();
var t = $(this);
var opts = t.tree('options');
opts.onBeforeExpand = function(node){
var n = find(node.id);
if (n.children && n.children.length){return}
if (n.children1){
var filter = opts.loadFilter;
opts.loadFilter = function(data){return data;};
t.tree('append',{
parent:node.target,
data:n.children1
});
opts.loadFilter = filter;
n.children = n.children1;
}
};
return data;
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Lines - 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>Tree Lines</h2>
<p>This sample shows how to show tree lines.</p>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,lines:true"></ul>
</div>
</body>
</html>
\ No newline at end of file
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"state":"closed",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java"
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games"
}]
},{
"id":16,
"text":"Actions",
"children":[{
"text":"Add",
"iconCls":"icon-add"
},{
"text":"Remove",
"iconCls":"icon-remove"
},{
"text":"Save",
"iconCls":"icon-save"
},{
"text":"Search",
"iconCls":"icon-search"
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
<!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>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment