Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Adding and Deleting Rows

DataTable Control (beta): Adding and Deleting Rows

Adding and deleting rows dynamically.

row
one
two
three
one
two
three
No records found.

Sample Code for this Example

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:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings