YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
Adding, updating, and deleting row data dynamically.
one | two | three | |
---|---|---|---|
No records found. |
CSS:
1 | /* custom styles for this example */ |
2 | .modform {margin-bottom: 1em;} |
3 | .index {width:5em;} |
view plain | print | ? |
Markup:
1 | <form class="modform"> |
2 | <select id="mode"> |
3 | <option value="add">Add</option> |
4 | <option value="update">Update</option> |
5 | <option value="deletestandard">Delete top-to-bottom</option> |
6 | <option value="deletereverse">Delete bottom-up</option> |
7 | </select> |
8 | |
9 | <select id="count"> |
10 | <option value=1>1</option> |
11 | <option value=5>5</option> |
12 | <option value=10>10</option> |
13 | <option value=25>25</option> |
14 | <option value=100>100</option> |
15 | </select> |
16 | |
17 | row(s) at index |
18 | |
19 | <input id="index" type="text" value="0" class="index"> |
20 | |
21 | <span id="go" class="yui-button yui-push-button"> |
22 | <span class="first-child"> |
23 | <button type="button">Go!</button> |
24 | </span> |
25 | </span> |
26 | </form> |
27 | |
28 | <div id="container"></div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.util.Event.addListener(window, "load", function() { |
2 | YAHOO.example.RowDataMod = function() { |
3 | var myColumnDefs = [ |
4 | {key:"row", label:"row counter", resizeable:true,sortable:true}, |
5 | {key:"one",resizeable:true}, |
6 | {key:"two",resizeable:true}, |
7 | {key:"three",resizeable:true} |
8 | ]; |
9 | |
10 | var myDataSource = new YAHOO.util.DataSource([]); |
11 | myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
12 | myDataSource.responseSchema = { |
13 | fields: ["one","two","three"] |
14 | }; |
15 | |
16 | var myDataTable = new YAHOO.widget.DataTable("container", |
17 | myColumnDefs, myDataSource, {}); |
18 | |
19 | var i=1, |
20 | bReverseSorted = false; |
21 | |
22 | // Track when Column is reverse-sorted, since new data will come in out of order |
23 | var trackReverseSorts = function(oArg) { |
24 | bReverseSorted = (oArg.dir === YAHOO.widget.DataTable.CLASS_DESC); |
25 | }; |
26 | |
27 | var globalDataCount = -1, |
28 | getData = function(count) { |
29 | if(count) { |
30 | var allData = []; |
31 | for(var i=0; i<count; i++) { |
32 | globalDataCount++; |
33 | allData.push({row:globalDataCount, one:"one", two:"two", three:"three"}); |
34 | } |
35 | return allData; |
36 | } |
37 | else { |
38 | globalDataCount++; |
39 | return {row:globalDataCount, one:"one", two:"two", three:"three"}; |
40 | } |
41 | }; |
42 | |
43 | // Add/update/delete rows as indicated |
44 | var handleClick = function() { |
45 | // Reset sort |
46 | myDataTable.set("sortedBy", null); |
47 | |
48 | var mode = YAHOO.util.Dom.get("mode").value, |
49 | count = parseInt(YAHOO.util.Dom.get("count").value), |
50 | index = parseInt(YAHOO.util.Dom.get("index").value); |
51 | |
52 | if(YAHOO.lang.isNumber(index)) { |
53 | switch(mode) { |
54 | case "add": |
55 | if(count === 1) { |
56 | myDataTable.addRow(getData(), index); |
57 | } |
58 | else { |
59 | myDataTable.addRows(getData(count), index); |
60 | } |
61 | return; |
62 | case "update": |
63 | if(count === 1) { |
64 | myDataTable.updateRow(index, getData()); |
65 | } |
66 | else { |
67 | myDataTable.updateRows(index, getData(count)); |
68 | } |
69 | return; |
70 | case "deletestandard": |
71 | if(count === 1) { |
72 | myDataTable.deleteRow(index); |
73 | } |
74 | else { |
75 | myDataTable.deleteRows(index, count); |
76 | } |
77 | return; |
78 | case "deletereverse": |
79 | if(count === 1) { |
80 | myDataTable.deleteRow(index, -1); |
81 | } |
82 | else { |
83 | myDataTable.deleteRows(index, count*-1); |
84 | } |
85 | return; |
86 | default: |
87 | break; |
88 | } |
89 | |
90 | } |
91 | YAHOO.log("Could not continue due to invalid index."); |
92 | } |
93 | |
94 | var btn = new YAHOO.widget.Button("go"); |
95 | btn.on("click", handleClick); |
96 | |
97 | return { |
98 | ds: myDataSource, |
99 | dt: myDataTable |
100 | }; |
101 | }(); |
102 | }); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings