|
James
|
 |
« Reply #3 on: November 25, 2015, 12:34:29 AM » |
|
parent page <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/Public/plugs/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" href="/Public/css/icon.css">
<script src="/Public/plugs/easyui/jquery.min.js"></script>
<script src="/Public/plugs/easyui/jquery.easyui.min.js"></script>
<script src="/Public/plugs/easyui/plugins/dnd/treegrid-dnd.js"></script>
<script src="/Public/plugs/easyui/plugins/dnd/datagrid-dnd.js"></script>
<script>
var data = {"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]};
$(function(){
$('#winpop').linkbutton({
text:'Win'
}).bind('click',function(){
$('#win').window({
width:600,
height:400,
modal:true,
inline:true,
href:'win-treegrid-dnd.html',
});
})
})
</script>
</head>
<body>
<div class="easyui-panel" title="My Panel" style="width:700px;height:500px;">
<table class="easyui-datagrid" data-options="
fit:true,
border:0,
toolbar:'#toolbar',
fitColumns:true,
singleSelect:true,
data:data,
onLoadSuccess:function(){
$(this).datagrid('enableDnd');
console.info('datagrid-dnd');
}
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<div id="toolbar"><a id="winpop"></a></div>
<div id="win"></div>
</div>
</body>
</html>
win-treegrid-dnd.html <script type="text/javascript">
var treegriddata = [{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]
</script>
<table class="easyui-treegrid"
data-options="
fit:true,
data: treegriddata,
border:false,
rownumbers: true,
idField: 'id',
treeField: 'name',
onLoadSuccess: function(row){
$(this).treegrid('enableDnd', row?row.id:null);
console.info('treegrid-dnd');
}
">
<thead>
<tr>
<th data-options="field:'name'" width="200">Name</th>
<th data-options="field:'size'" width="100" align="right">Size</th>
<th data-options="field:'date'" width="200">Modified Date</th>
</tr>
</thead>
</table>
|
