 Show Posts
|
|
Pages: [1]
|
|
1
|
General Category / EasyUI for jQuery / Re: Create specialised layout using js scripts only
|
on: December 03, 2015, 02:26:50 AM
|
I using the following script to evaluate your suggestion: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - 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> <script> $(document).ready(function () { $('#layout').layout('add', { region: 'east', width: '30%', split: true }).layout('add', { region: 'center' }); var ns = $('<div></div>').appendTo($('#layout').layout('panel','center')); ns.layout({fit:true}); ns.layout('add', { region: 'center' }).layout('add', { region: 'north', height: '30%', split: true }); }); </script> </head> <body> <div id = "layout"> <div style="margin:20px 0; "></div> <div class="easyui-layout" id = "inner" style="width:700px;height:300px;border:1px solid black;"> </div> </div> </body> </html> As you will see if the script is run, the frame is quite empty. Clearly, I must be missing something! Any recommendations to move forward on this will be really appreciated! Alastair |
|
|
|
|
2
|
General Category / EasyUI for jQuery / Create multiple link buttons using js scripts only
|
on: November 30, 2015, 02:56:25 AM
|
|
I am trying to create a row of link buttons using javascript only.
What I have tried is:
jQuery('#toolbar').linkbutton({width: 40,height: 25, iconCls: 'icon-add'});
jQuery('#toolbar').linkbutton({width: 40,height: 25, iconCls: 'icon-remove'});
But the last script (i.e. icon-remove) always overlays (or overwrites) the previous script execution.
How do I lay out a series of link buttons - one after the other? (i.e. side by side).
I have looked at the demos, but they do not have js examples.
Any help on this matter will be really appreciated!
Alastair
|
|
|
|
|
3
|
General Category / EasyUI for jQuery / Create specialised layout using js scripts only
|
on: November 30, 2015, 02:21:20 AM
|
I am trying to create a specialised layout using only javascript statements. (I was unable to attach an image - the upload folder was full - so the best I can do is provide an html table view, as follows:) <table border="1">
<tbody>
<tr>
<td>North West</td>
<td rowspan="2">East<br /><br /></td>
</tr>
<tr>
<td>South West</td>
</tr>
</tbody>
</table>
The strategy that I need to follow appears to be: a) create the center panel. (It will become south west) b) split the center panel, using a north. (This will become the northwest panel.) c) create the east panel. I have looked carefully at all the examples for creating layouts, but I can't figure out how to create this specialised layout using js statements only. Any help or guidance on how to achieve this goal will be really appreciated! Alastair |
|
|
|
|
5
|
General Category / EasyUI for jQuery / Layout division title font color
|
on: November 28, 2015, 02:00:59 AM
|
I am trying to work out how to change the font color of the title in a panel. For example, here is a standard setting for 'east': <div id = "east" data-options="region:'east',split:true" title="East" style="width:50%;"> If for example I want to change the font color of the title to 'red', I would expect the following to work: <div id = "east" data-options="region:'east',split:true" title="East" style="width:50%; color:red"> When I try this out, there is no font color change of the title. Am I missing something? Any advice on this will be really appreciated! Alastair |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Drag and drop BETWEEN two treegrids (but not within)
|
on: August 19, 2014, 07:09:16 AM
|
|
I have an application in which I need to be able to drag and drop BETWEEN two treegrids, but not permit drag and drop WITHIN either treegrid.
To explore this, I started off with the extension example (treegrid-dnd.zip), and extended it so that I have two treegrids (tg1, and tg2, using data1, and data2).
(See the attached modified html script).
Now, if I use
$(function(){$('#tg1').treegrid({onDragEnter: function(targetRow,sourceRow){
var opts = $(this).treegrid('options');
var tr = opts.finder.getTr(this, targetRow[opts.idField]);
if (tr.attr('node-id')){return false;}}})});
This disables tg1 from d and d'ing within Treegrid 1, but allows d and d into treegrid2. (This is expected behaviour)
But if I add
$(function(){$('#tg2').treegrid({onDragEnter: function(targetRow,sourceRow){
var opts = $(this).treegrid('options');
var tr = opts.finder.getTr(this, targetRow[opts.idField]);
if (tr.attr('node-id')){return false;}}})});
Then d and d is not allowed either within each treegrid, or between the treegrids.
So, clearly, there must be some parameter that is incorrect, but I am not smart enough in js to spot it yet.
Any help on this will be really appreciated!
Alastair
|
|
|
|
|
9
|
General Category / EasyUI for jQuery / Placing two treegrids alongside each other
|
on: August 19, 2014, 06:11:59 AM
|
I am trying to place two treegrids alongside each other. I am using the following code: Left table: <table id="tg" title="Folder Browser 1" class="easyui-treegrid" style="width:50%;height:250px;align:left" data-options=" data: data, rownumbers: true, idField: 'id', treeField: 'name', onLoadSuccess: function(row){ $(this).treegrid('enableDnd', row?row.id:null); } "> .. </table> and Right table: <table id="tg2" title="Folder Browser 2" class="easyui-treegrid" style="width:50%;height:250px;align:right" data-options=" data: data2, rownumbers: true, idField: 'id', treeField: 'name', onLoadSuccess: function(row){ $(this).treegrid('enableDnd', row?row.id:null); } "> .. </table> The tables remain aligned vertically - the first above the second. I suspect my codes for the left and right align are incorrect. Is there a way to correctly specify the alignment so that the tables left and right align? Many thanks, Alastair |
|
|
|
|
10
|
General Category / EasyUI for jQuery / Re: How to disable drags and drops within treegrid?
|
on: August 18, 2014, 05:36:33 AM
|
|
Many thanks!
For the record, this is the script I had to actually use:
$(function(){$('#tg').treegrid({onDragEnter: function(targetRow,sourceRow)
{
var opts = $(this).treegrid('options');
var tr = opts.finder.getTr(this, targetRow[opts.idField]);
if (tr.attr('node-id')){return false;}
}})
});
(Note: the parentheses were unbalanced.)
Alastair
|
|
|
|
|
14
|
General Category / General Discussion / Treegrid: How to suppress the icons display
|
on: August 08, 2014, 10:15:07 PM
|
|
For the application I have in mind I need to suppress the icons that are currently displayed. For example, the Folders (Open, Closed) and the Document icon, need to be suppressed.
I have searched the forum posts and the Documentation, but it is not clear how to do this.
Any advice will be really appreciated!
Alastair Walker
|
|
|
|
|
