Adding and deleting rows dynamically.
row | one | two | three |
---|
one | two | three | |
---|---|---|---|
No records found. |
Data:
CSS:
1 | #buttons {margin-bottom: 1em;} |
view plain | print | ? |
Markup:
1 | <div id="buttons"> |
2 | <span id="addrow" class="yui-button yui-push-button"> |
3 | <span class="first-child"> |
4 | <button type="button">Add one row</button> |
5 | </span> |
6 | </span> |
7 | <span id="deleterow" class="yui-button yui-push-button"> |
8 | <span class="first-child"> |
9 | <button type="button">Delete top row</button> |
10 | </span> |
11 | </span> |
12 | <span id="addrows" class="yui-button yui-push-button"> |
13 | <span class="first-child"> |
14 | <button type="button">Add 20 rows</button> |
15 | </span> |
16 | </span> |
17 | <span id="deleterows" class="yui-button yui-push-button"> |
18 | <span class="first-child"> |
19 | <button type="button" name="button5">Delete top 20 rows</button> |
20 | </span> |
21 | </span> |
22 | </div> |
23 | <div id="basic"></div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.util.Event.addListener(window, "load", function() { |
2 | YAHOO.example.DynamicData = new function() { |
3 | var data = {one:"one",two:"two",three:"three"}; |
4 | |
5 | var myColumnDefs = [ |
6 | {key:"row",resizeable:true,sortable:true}, |
7 | {key:"one",resizeable:true}, |
8 | {key:"two",resizeable:true}, |
9 | {key:"three",resizeable:true} |
10 | ]; |
11 | |
12 | this.myDataSource = new YAHOO.util.DataSource([]); |
13 | this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
14 | this.myDataSource.responseSchema = { |
15 | fields: ["one","two","three"] |
16 | }; |
17 | |
18 | |
19 | this.myDataTable = new YAHOO.widget.DataTable("basic", |
20 | myColumnDefs, this.myDataSource, {}); |
21 | |
22 | var i=1; |
23 | |
24 | YAHOO.util.Event.addListener("addrow","click",function() { |
25 | var record = YAHOO.widget.DataTable._cloneObject(data); |
26 | record.row = i++; |
27 | this.myDataTable.addRow(record); |
28 | },this,true); |
29 | |
30 | YAHOO.util.Event.addListener("deleterow","click",function() { |
31 | if(this.myDataTable.getRecordSet().getLength() > 0) { |
32 | this.myDataTable.deleteRow(0); |
33 | } |
34 | },this,true); |
35 | |
36 | |
37 | YAHOO.util.Event.addListener("addrows","click",function(e) { |
38 | var myArray = []; |
39 | for(var l=i;i<=l+19;i++) { |
40 | var record = YAHOO.widget.DataTable._cloneObject(data); |
41 | record.row = i; |
42 | myArray.push(record); |
43 | } |
44 | this.myDataTable.addRows(myArray); |
45 | },this,true); |
46 | |
47 | YAHOO.util.Event.addListener("deleterows","click",function() { |
48 | var length = this.myDataTable.getRecordSet().getLength(); |
49 | if(length > 0) { |
50 | var count = (length > 19) ? 20 : length; |
51 | this.myDataTable.deleteRows(0,count); |
52 | } |
53 | },this,true); |
54 | |
55 | |
56 | new YAHOO.widget.Button("addrow"); |
57 | new YAHOO.widget.Button("addrows"); |
58 | new YAHOO.widget.Button("deleterow"); |
59 | new YAHOO.widget.Button("deleterows"); |
60 | }; |
61 | }); |
view plain | print | ? |
INFO0ms (+0) 4:58:30 AM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings