 Show Posts
|
|
Pages: [1]
|
|
2
|
General Category / EasyUI for jQuery / Bug ComboTree? Generated <input>'s without array[]
|
on: October 19, 2012, 02:11:06 AM
|
Simple code: <select id="tt" class="easyui-combotree"
data-options="required:true,onlyLeafCheck:false,checkbox:true,cascadeCheck:true,required:true"
multiple style="width:300px;" name="test">
</select> When I check the options, one by one, new <input type="hidden" name="test">'s appear for each checked option. BUT they don't have the name with [] in the end, which results in only the first input's value being posted, instead of an array. Shouldn't they be <input type="hidden" name="test[]" />? Is this a bug? Am I missing something in the config part? Thanks |
|
|
|
|
3
|
General Category / EasyUI for jQuery / Re: Higher ComboTree to render visible all checked options
|
on: October 16, 2012, 01:53:24 AM
|
|
Thanks,
what I was looking for was something more like a Tag list, where tags could be selected from a Combotree, so basically while checking boxes, tags would appear in the list, and unchecking would delete them.
BUT, at the same time, if not opened, the dropdown list of checkboxes/tags would not be visible.
|
|
|
|
|
4
|
General Category / EasyUI for jQuery / Higher ComboTree to render visible all checked options
|
on: October 15, 2012, 04:04:30 AM
|
|
Right now, since my options are longer texts, if I select 2-3 from the list of values, only the first are displayed, and the next no longer are visible.
Since the combotree is rendered as an input box, I don't see the way in which this could be done.
Could you please suggest a way to render data in a multiline fashion? Even with a textarea, if not one/line.
Thanks a lot,
Catalin
|
|
|
|
|
6
|
General Category / EasyUI for jQuery / Re: Drag Drop in TreeGrid
|
on: August 24, 2012, 05:27:27 AM
|
Beautiful, stworthy!  One bug: editing somehow is not working anymore... If I don't enable Dnd, it works. I mean, it draws the input boxes, but the Editing cursor doesn't show up when clicking in them, it's like they are readonly. |
|
|
|
|
7
|
General Category / EasyUI for jQuery / Re: Drag Drop in TreeGrid
|
on: August 24, 2012, 02:43:44 AM
|
Yogesh, I don't know if this is what you need, I got the node values for source/destination nodes with this little code: //inside onDrop
src = $('#tt').treegrid('find', $(source).attr('node-id'));
dest = $('#tt').treegrid('find', $(this).attr('node-id')); |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: Drag Drop in TreeGrid
|
on: August 24, 2012, 02:00:00 AM
|
Great. Now, is it possible to just move nodes around, without the need to reload the tree? I'd like to do everything in Javascript, and then submit the whole tree and save it to the database (it's a Mongo DB, so no problems). My code creates all sort of problems, plus it doesn't work for moving nodes: [...]onDrop:function(e,source) {
var action,point;
if ($(this).hasClass('row-append')){
action = 'append';
} else {
action = 'insert';
point = $(this).hasClass('row-top') ? 'top' : 'bottom';
}
$(this).removeClass('row-append row-top row-bottom');
//alert(action+":"+point);
// your logic code here
// do append or insert action and reload the treegrid data
if (action == 'append')
$(this).append(source);
else if (point == 'top')
$(source).insertBefore(this);
else
$(source).insertAfter(this);
[...]
}Should I do a recursive getChildren, and then an append, to get it to work "in browser"? This would be a great addition. Thanks a lot for your efforts! |
|
|
|
|
9
|
General Category / EasyUI for jQuery / Re: Drag Drop in TreeGrid
|
on: August 24, 2012, 12:21:38 AM
|
Thanks yogesh, but excuse my ignorance: I don't understand yet. Here's how I tried to make it work. - Went to the demos folder
- edited treegrid3.html file (so that I know settings were all fine)
- added the style to the head
- added the code
$(document).ready(function() {
enableDnd($('#tt')); //clearly, "tt" is the ID of the tree table
});[/li]Conclusion? DND doesn't work. I edited the provided function and added some line to see what was going on: function enableDnd(t){
var nodes = t.treegrid('getPanel').find('tr[node-id]');
alert($('tbody tr').length);
alert(nodes.length);Guess what: it's Zero. Don't know, it should be easyer:( This is my whole code, treegrid3.html edited: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editable TreeGrid - 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-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.row-top td{
border-top:1px solid red;
background:#fff;
}
.row-bottom td{
border-bottom:1px solid red;
background:#fff;
}
.row-append td{
border:0;
background:#FBEC88;
}
</style>
<script type="text/javascript" >
function editNode(){
var node = $('#tt').treegrid('getSelected');
if (node){
$('#tt').treegrid('beginEdit',node.id);
}
}
function saveNode(){
var node = $('#tt').treegrid('getSelected');
if (node){
$('#tt').treegrid('endEdit',node.id);
}
}
function cancelNode(){
var node = $('#tt').treegrid('getSelected');
if (node){
$('#tt').treegrid('cancelEdit',node.id);
}
}
function enableDnd(t){
var nodes = t.treegrid('getPanel').find('tr[node-id]');
alert($('tbody tr').length);
alert(nodes.length);
nodes.each(function() {alert($(this).attr('node-id'));});
nodes.find('span.tree-hit').bind('mousedown.treegrid',function(){
return false;
});
nodes.draggable({
disabled:false,
revert:true,
cursor:'crosshair',
proxy: function(source){
var p = $('<div class="tree-node-proxy tree-dnd-no"></div>').appendTo('body');
p.html($(source).find('.tree-title').html());
p.hide();
return p;
},
deltaX: 15,
deltaY: 15,
onBeforeDrag:function(){
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({accept:'no-accept'});
},
onStartDrag:function(){
$(this).draggable('proxy').css({
left:-10000,
top:-10000
});
},
onDrag:function(e){
$(this).draggable('proxy').show();
this.pageY = e.pageY;
},
onStopDrag:function(){
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({accept:'tr[node-id]'});
}
}).droppable({
accept:'tr[node-id]',
onDragOver:function(e,source){
var pageY = source.pageY;
var top = $(this).offset().top;
var bottom = top + $(this).outerHeight();
$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
$(this).removeClass('row-append row-top row-bottom');
if (pageY > top + (bottom - top) / 2){
if (bottom - pageY < 5){
$(this).addClass('row-bottom');
} else {
$(this).addClass('row-append');
}
} else {
if (pageY - top < 5){
$(this).addClass('row-top');
} else {
$(this).addClass('row-append');
}
}
},
onDragLeave:function(e,source){
$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
$(this).removeClass('row-append row-top row-bottom');
},
onDrop:function(e,source){
var action,point;
if ($(this).hasClass('row-append')){
action = 'append';
} else {
action = 'insert';
point = $(this).hasClass('row-top') ? 'top' : 'bottom';
}
$(this).removeClass('row-append row-top row-bottom');
alert(action+":"+point);
// your logic code here
// do append or insert action and reload the treegrid data
}
});
}
$(document).ready(function() {
enableDnd($('#tt'));
});
</script>
</head>
<body>
<h2>Editable TreeGrid - Pagination</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Select node and Click edit button to perform editing.</div>
</div>
<div style="margin:10px 0">
<a href="javascript:editNode()" class="easyui-linkbutton">Edit</a>
<a href="javascript:saveNode()" class="easyui-linkbutton">Save</a>
<a href="javascript:cancelNode()" class="easyui-linkbutton">Cancel</a>
</div>
<table id="tt" title="TreeGrid" class="easyui-treegrid" style="width:700px;height:300px"
data-options="url:'treegrid_data3.json',idField:'id',treeField:'code',
rownumbers:true,pagination:true,fitColumns:true,autoRowHeight:false,dnd:true">
<thead>
<tr>
<th data-options="field:'code',editor:'text'" rowspan="2" width="150">Code</th>
<th colspan="2">Group Fields</th>
</tr>
<tr>
<th data-options="field:'name',editor:'text'" width="200">Name</th>
<th data-options="field:'addr',editor:'text'" width="200">Addr</th>
</tr>
</thead>
</table>
</body>
</html> |
|
|
|
|
10
|
General Category / EasyUI for jQuery / Re: Drag Drop in TreeGrid
|
on: August 23, 2012, 09:53:21 PM
|
|
Hello
I tried for hours to get this code to work, with the latest version of the treegreid, but nothing,
I have no idea where this code should be placed, and how it will be called.
Could you be so kind as to give me, even in only a few words, a few indications as to where this code should be placed?
In other examples from the previous days I noticed an option "dtd:true" but doesn't seem to work "out of the box".
So basically the question is: where do I put this code in order for dnd to work?
Tried to put it into a ready() handler, thought otherwise the tree wouldn't be generated at the time of execution... but the nodes list turns out empty.
Thanks in advance,
Catalin
|
|
|
|
|
.
)
