vitmalina / w2ui Goto Github PK
View Code? Open in Web Editor NEWUI widgets for modern apps. Data table, forms, toolbars, sidebar, tabs, tooltips, popups. All under 120kb (gzipped).
Home Page: http://w2ui.com
License: MIT License
UI widgets for modern apps. Data table, forms, toolbars, sidebar, tabs, tooltips, popups. All under 120kb (gzipped).
Home Page: http://w2ui.com
License: MIT License
Hi,
Have you others skins ?
Do you use Less ?
Thanks
blr
As the data received from the server is not formatted as expected (field recid is not present), I wished to format it during the onLoad handler.
As the data is received as text and I have some processing to do, I eval'ed it as Grid do and I did my job.
But now, eventData.data is not anymore a "string" but an "object" and this is not working with Grid.
So, in w2grid.js, line 878:
var data = 'data = '+ eventData.data; // $.parseJSON or $.getJSON did not work because it expect perfect JSON data
var data = eval(data); // where everything is in double quotes
we can check whether it's a object
var data;
if (typeof eventData.data == "object") {
data= eventData.data
} else {
// $.parseJSON or $.getJSON did not work because it expect perfect JSON data
// where everything is in double quotes
data = eval( 'data = '+ eventData.data);
}
as a side note, eval is global so the variable named data in the eval is not the same as the variable data in the closure.......
When I place a form inside the
one is inside the w2popup container, and the other is the actual code (<div style="display:none")
I think you need documented this. :)
There is a way to specify messages to be displayed when there is no data or on delete. Similarly provide option to specify message for refresh.
I have some fields that cannot be edited with the ones embedded.
Like a colour which is rendered with a div with background.
Or an id number where only the 5 last digits can be edited.
So I was wondering how can I add a field type to be able to handle this....
Any suggestions ?
Something like:
$.fn.w2field('addType', type_name, function(){} )
could be nice, don't you think ?
Consider adding first and last page in pagination toolbar, not only prev and next
When I use the 'url' property in the grid then the paging doesn't skip to the next page, although all records have been read (36 records read, pagesize 16). I used your recordset of composers.
But when I use instead of the url property:
w2ui['grid'].load('php/load.php')
the paging works fine.
Important: the records are showing up in both situations.
$().w2grid({
name: 'grid',
header : 'This is working great',
recordsPerPage: 16,
url : 'php/load.php',
toolbar: {
items: [
{
type: 'break',
id: 'break0'
},
{
type: 'button',
id: 'showboat',
caption: 'Showboat',
img: 'icon-add',
'hint': 'Some useful hint'
}],
onClick: function(target, data) {
console.log(target);
console.log(data);
}
},
show: {
selectColumn: true,
toolbar: true,
footer: true,
toolbarAdd: true,
toolbarDelete: true,
toolbarSave: true
},
searches: [
{field: 'lname', caption: 'Last Name', type: 'text'},
{field: 'fname', caption: 'First Name', type: 'text'},
{field: 'email', caption: 'Email', type: 'text'}
],
sortData: [{field: 'recid', direction: 'ASC'}],
header: 'List of Names',
columns: [
{field: 'fname', caption: 'First Name', size: '30%', sortable: true},
{field: 'lname', caption: 'Last Name', size: '30%', sortable: true},
{field: 'sdate', caption: 'Dates', size: '120px', sortable: true}
]
});
PHP load (very plain):
<?php
$data = "
{
total: 36,
page: 0,
header: '50 Greatest Composers of All Times',
records: [
{ recid: 11, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
{ recid: 12, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827' },
{ recid: 13, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 14, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 15, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
{ recid: 16, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
{ recid: 17, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827', style: \"background-color: #C2F5B4\" },
{ recid: 18, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 19, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 20, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750', style: \"color: red\" },
{ recid: 21, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809', style: \"background-color: #FBFEC0\" },
{ recid: 22, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827' },
{ recid: 23, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 24, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 25, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750', style: \"color: blue\" },
{ recid: 26, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
{ recid: 27, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827'},
{ recid: 28, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 29, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 30, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
{ recid: 31, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
{ recid: 32, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827' },
{ recid: 33, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 34, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 35, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750', style: \"color: gray\" },
{ recid: 36, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
{ recid: 37, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827'},
{ recid: 38, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 39, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 40, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
{ recid: 41, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
{ recid: 42, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827', style: \"background-color: #C2F5B4\" },
{ recid: 43, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
{ recid: 44, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
{ recid: 45, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
{ recid: 46, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' }
]
}
";
echo $data;
?>
My first tests are very promising. You did a great job so far.
Johan
Hi,
In the grid footer, for previous page and the next page, the style is define in the grid code.
I add a.w2btn and a.w2btn:hover in the css but i do'nt touch the code.
Is it right for you ?
If w2form is created with remove .html file ( form.form_url ), then when w2layout.content(main, w2form) will not render form correctly. The problem is that it wants to render before form is loaded.
the value is not set in LIST field
Sometimes it would be helpful to have a new event for grids. This event should be called if the visible page of the grid is changed. For example: If the "master -> details" demo has multi-page master grid then the selected old details are still visible if the page is changed. With the suggested event it would be easily possible to clear the details grid. Vitali, what do you think?
...Rolf
many business use cases require in grids grouping of the data, but also summaries using various functions. see in action:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/group-summary-grid.html
of course, sometimes the summary calculations needs to be done on the server to have the correct value, since not always the entire information is available in the client to do the calculations. see in action:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/remote-group-summary-grid.html
regards
The event onLoad is also called during a save.
that's normal as it is part of the request method.
this is a problem especially when the data has to be formatted in this event as when saving the data is not present.
And there is no information in the onLoad event to tell you what is happening.
the onLoad event shouldn't be triggered on a save. Or, the name is not the right one. onRequest would be probably better.
Worse, when the http servers returns an error, the eval of the data is done before checking for the error resulting of a js error.
I'm loading dynamically modules in my app. One of the module is using the grid.
The first time the module is loaded and inserted in the DOM everything went fine.
The second time, I got an error:
ERROR: The parameter "name" is not unique. There are other objects already created with the same name (obj: gridOrderCar).
A quick check shows that there is an internal hash "w2ui" where all the objects are stored.
And it's not on sync with the DOM.
Hence the trouble.
Is there a public way to delete it from the internal table ?
Or is it worth changing the test in w2grid.js for instance to check if there is still a DOM object ?
cheers
when required to nest tabs, the best approach is to have also have them vertically on the side: http://lucian.lature.net/extjs/demo/VerticalTabPanel/
this way they can be nested without overwhelming the user (see the 3rd and 4th example in the link above)
another interesting option is to have "side tabs" rotated:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/tabs/side-tabs.html
but they're not very efficient since the vertical space is not used very well, and the lisibility also suffers allot due to text rotation.
regards.
On trying to load a form from an external html file, I have found the property "form_url" in the $.fn.w2form function. This is doing what I want to do except I had to modify one line of code in the function:
On line 7540 (original):
if ($(obj).length != 0) {
in:
if ($(obj).length != 0 || data.length != 0) {
Otherwise the data coming from the $.get function is not rendered into the form.
My form definition looks now like this:
$('#form').w2form({
name: 'form',
form_url: 'components/form.html', // <-- here I put the form_url
fields: [
{name: 'fname', type: 'text', required: true},
{name: 'lname', type: 'text', required: true},
{name: 'sdate', type: 'text'}
],
actions: {
loadRecord: function() {
},
reset: function() {
this.clear();
},
save: function() {
this.save();
}
}
});
w2ui['layout'].content('main', w2ui['grid']);
w2ui['layout'].content('right', w2ui['form']); // <-- there is the initial form
A sample image is attached.
pivot grids are incredibly useful for many apps. see some nice examples here:
http://dev.sencha.com/deploy/ext-3.3.1/examples/#sample-3
unfortunately sencha failed to include them in their new 4.x library, so many projects I consulted still keep using 3.x (but also for performance reasons)
regards
Well Done!, I like it, but, please could you support European style dates (d/m/y), not just US (m/d/y) style ones, this will expand your user base to this side of the pond (selfishly to include me).
Can you please publish the lib to http://jamjs.org/? I can do it from my account if you have no issues with it. BTW really great library..we been looking for something like this for some time.
I tried to set the text alignment to right through align="right" or style="text-align:right" with no luck.
After investigation, that's normal.
The style or the attribute is set to the TD tag.
But there value is put in a DIV inside.
Hence there is no way to set the alignment.
On the grid, the changed fields are highlighted, which is perfect.
But when a save has been done, those fields are no more changed...
So it would be nice to have them un-highlighted.
Good job, I love your grid.
Is there a roadmap of your works?
Did you consider a menu plugin ?? (I like the simple kendoui menu...)
When building installable applications for Chrome Markertplace there are some problems with inline event handlers. (submitted by Joe Sullivan)
For the inline thing, Google's explanation is http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution.
For the code, this (itsjoesullivan@0d50517#src/w2toolbar.js) commit did most of the changes in w2toolbar.js. But a really basic example is:
The in-line code that Google won't allow might look like:
var html = "<button onclick="sayHi();">Hello</button>"
$(container).html(html);
Whereas a Google-approved version would be:
var button = document.createElement("button");
button.innerHTML = "Hello";
$(button).click(sayHi);
$(container).html(button);
I created json2html to simplify the syntax for creating elements, so the equivalent code (admittedly, not much simpler in this example) goes:
var button = json2html({
button: "Hello"
});
$(button).click(sayHi);
$(container).html(button);
current inline editing of rows is quite limited. A more user friendly version could look like:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/row-editing.html
and for the classical inline editing the visual feedback for the edited cells is better like in this example:
http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/edit-grid.html
(edit some cells and see the red triangle in the corner)
regards
editable:{type:'date', options:{format:'dd/mm/yyyy'} }
but it's not working.
That's normal, look at the line 123 in w2fields.js.
So we have to do:
editable:{type:'date', format:'dd/mm/yyyy' }
cheers
In w2grid.request function, the message passed to 'showStatus' is 'Refreshing' but the status displayed is 'Refreshing...'
You can hide and show columns either in the drop down or from JavaScript
Hi,
Thank you for contributing your work to the community.
I found your grid component a lot easier to use and more consistent than Datatables.
I have only one question - is it possible to use the style of the Twitter Bootstrap tables with it?
Thank you,
Todor.
Hi,
I'm having some problems working with tabs. For example, how do I set their contents after defining them using w2tabs? How do I get their size (width + height)? I thought that I can just use the selected-tab selector to get the current tab.
Could you please provide an example how I can add, e.g., a simple div or paragraph to a tab?
In the Resizable Panels Demo, after I dragged to resize a panel , I click on the border I just dragged , it performed a resize action again .
Hi,
In the sidebar demo (sidebar-7), the second group node (label Level 2) display hide but the children nodes are hide.
Hello,
if form has error, all list field are reset to 1st value in current GIT version.
Thx for your fix.
Hi
I tested the sidebar component with Internet Explorer 8 (not supported) but I've seen it all works quite well (at least a couple of work around) I noticed two things:
when I double-click on an item in a sidebar (on the text icon) is highlighted throughout the text of the sidebar
functions hide and show the various items do not work well
you have any suggestions?
tnk
while paging in a grid is a nice addition, for many scenarios nowadays, buffered scrolling is much more user friendly. see one in action:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/buffer-grid.html
regards.
How can I build w2ui?
I suspect build.xml is involved in some way.
What is the magic command that builds the libraries? I googled build.xml
and it said something about ant (I've no ideas that ant is) but it was installed on my computer. I gave the command
ant build.xml
but this failed
The documentation is saying that the grid is loading the data with a POST.
In w2grid.js, the method request use only GET, PUT and DELETE.
function request(cmd, [add_params], [url])
By default, the cmd parameter is set to "get-records" which is, behind the curtain, a GET.
When creating a grid, if you set the url parameter, a GET will be done. not a POST.
cmd:
Hello,
I found that w2form() method can't handle 'selected' option as following...
$('#form').w2form({
name : 'form',
url : 'server/post',
fields: [
{ name: 'field_enum', type: 'enum', required: true},
options: {
items: [{id:0, text:'Adams, John'}, {id:1, text:'Johnson, Peter'}, {id:2, text:'Lewis, Frank'}, {id:3, text:'Cruz, Steve'}, {id:4, text:'Donnun, Nick'}],
selected: [{id:1, text:'Johnson, Peter'}] // <- not working!
}
}
],
}
});
Instead, I tried w2field method. but, this method can't handle 'required' option.
$('input[name="field_enum"]').w2field({
type: 'enum',
items: [{id:0, text:'Adams, John'}, {id:1, text:'Johnson, Peter'}, {id:2, text:'Lewis, Frank'}, {id:3, text:'Cruz, Steve'}, {id:4, text:'Donnun, Nick'}],
selected: [{id:1, text:'Johnson, Peter'}], // <- working!
required: true // <- not working!
}
);
Would you be able to check this problem?
(Sorry for my broken English. I'm not native english writer.)
I want to use a grid inside a popup. The problem: Width and height of the grid are wrong and the selection isn't visible. Is such a combination not supported? Is my code wrong? Thanks in advance.
...Rolf
The code:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"
href="http://w2ui.com/web/css/w2ui-1.1.min.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="http://w2ui.com/web/js/w2ui-1.1.min.js">
</script>
</head>
<body>
<input id="btn" type="button" value="Popup" />
<div id="popup" style="display: none; width: 40%; height: 40%; overflow: hidden;">
<div rel="title">
TITLE
</div>
<div rel="body">
<div id="grid" style="width: 100%; height: 100%;"></div>
</div>
</div>
<script type='text/javascript'>
$('#grid').w2grid({
name: 'foo',
columns: [ { field: 'recid', caption: 'ID', size: '100%' } ],
records: [ { recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' } ]
});
$(document).on('click', '#btn', function(e){
$('#popup').w2popup('open');
});
</script>
</body>
</html>
In a form I would like to use name entries like "Foo.Bar.Baz[0]" or similar. For simple text input fields this is possible but not for fields with type "date". The following small demo works. Changing "Foo_Baz" to "Foo.Baz" shows the problem: No date window occurcs.
...Rolf
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"
href="http://w2ui.com/web/css/w2ui-1.1.min.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="http://w2ui.com/web/js/w2ui-1.1.min.js">
</script>
</head>
<body>
<div id="form">
<div class="w2ui-page page-0">
<div class="w2ui-label">Text:</div>
<div class="w2ui-field">
<input name="Foo.Bar" type="text" maxlength="100" size="60"/>
</div>
<div class="w2ui-label">Date:</div>
<div class="w2ui-field">
<input name="Foo_Baz" type="text" size="16"/>
</div>
</div>
</div>
<script type='text/javascript'>
$('#form').w2form({
name : 'form',
url : 'server/post',
fields: [
{ name: 'Foo.Bar', type: 'text' },
{ name: 'Foo_Baz', type: 'date' }
]
});
</script>
</body>
</html>
Hi,
How do I get real-time size updates when the main panel in a layout is resized?
I'm currently rendering a three.js renderer into the main panel of a three panel layout. If the panels get resized the renderer needs to be resized as well, so I added a resize event listener:
w2ui['layout'].on('resize', function(target, data) {
var width = w2ui['layout'].get('main').width;
var height = w2ui['layout'].get('main').height;
renderer.setSize(width, height);
...
});
However, during the resize the width and height values of the main panels do not change. I can only get a continuous width and height update of all other panels by attaching a 'resizing' event listener (here I get updates for, e.g., the left and right panel, depending which is getting resized).
Is there a better way to update the main panel content when the panels get resized?
And how do I attach event listeners to panels?
Hello,
I have test the demo on the webpage and it seem that there a bug when adding more than 1000 row... the pagination does't work right if there 1000 row
here the link http://w2ui.com/web/demos/#!grid/grid-9
add more than one row until 1000 and try to change page with the pagination you will see that there a visual glitch
I get errors if I use "w2ui-1.1.css" in conjunction with the css preprocessor "LESS". The reason is the parameter "z-Index". I'm not sure if this is a real bug in the css file but I think it would be better using "z-index".
Thanks for your work.
Regards,
...Rolf
when creating the column header in the function getColumnsHTML(), line 2146 :
html += '<td id="grid_'+ this.name +'_cell_header_'+ i +'" class="w2ui-head" '+
(col.sortable ? 'onclick="w2ui[\''+ this.name +'\'].doSort(\''+ col.field +'\', null, event);"' : '') +
' style="height: auto !important; '+ (i == this.columns.length -1 ? 'border-right: 1px solid transparent;' : '') +'">'+
'<div><div class="'+ sortStyle +'" style="height: auto !important; cursor: default; width: 100%; overflow: hidden;">'+
col.caption +
'</div></div>'+ resizer +'</td>';
change
col.caption +
with
(col.caption == '' ? ' ' : col.caption) +
Hello.
I found a minor mistake in "w2ui/css/w2ui-1.1.css".
At line 749, no colon.
div.w2ui-calendar table.w2ui-calendar-days td:hover {
border 1px solid rgba(0,0,0,0); // <- colon is missing.
background-color: yellow;
}
Incidentally, I found it by asset pre-compiling using Ruby on Rails.
Regards,
If I use recid entries with space characters in the name the blue selection for the entry works not correct (tested with 1.1 and 1.2). Are spaces forbidden for recid? If yes, please write this in the documentation. A small demo (note the space in 'B B'):
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"
href="http://w2ui.com/web/css/w2ui-1.1.min.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="http://w2ui.com/web/js/w2ui-1.1.min.js">
</script>
</head>
<body>
<div id="grid" style="width: 50%; height: 50%;"></div>
<script type='text/javascript'>
$('#grid').w2grid({
name: 'foo',
columns: [ { field: 'recid', caption: 'ID', size: '100%' } ],
records: [ { recid: 'AA' }, { recid: 'B B' }, { recid: 'CC' } ]
});
</script>
</body>
</html>
Thanks for your work.
...Rolf
I took the code from demos and changed the height of container to '100%'. The layout is not visible in this case. See http://jsfiddle.net/brsca/2/. It works fine if the height is fixed.
Hi,
I work on dark theme.
I can'nt handle the disabled state of tab because the code change those properties.
If I set a field like "person.age", it is correctly displayed. But this is seen always as changed.
A quick analyze of the code showed that there is the magic dealing with the dot in the set(recid,record) but there is nothing in the getChanged().
Also, it's dealing with only one level so "person.address.town" won't work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.