YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: DataTable Control: Adding, Updating, and Deleting Rows

DataTable Control: Adding, Updating, and Deleting Rows

Adding, updating, and deleting row data dynamically.

View example in new window.

row(s) at index

Sample Code for this Example

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:

1YAHOO.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 | ?

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings