I am using YUI (version 2.4.1) datatable for tabular data rendering. I needed to allow the users to have the ability to select one or more rows using checkboxes and then submit them to the server for further action. Up to this point you can find sample code on YUI website or other sites if you search around.
For a better user experience I also needed to give them links to ‘Select All’ and ‘Unselect All’ which did exactly that. This I was not able to find on the web (I am sure it is there somewhere). Since I finally figured it out, I thought it only fair to blog-it so others can find. Code is quite simple.
In the sample below I will only highlight the code necessary to make this happen. For more details on YUI datatable refer to Yahoo site.
To start off lets add a check box to the table. In the sample below the first column is the check box column.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
myColumnDefs = [ {key:"checked",label:"", width:"30", formatter:YAHOO.widget.DataTable.formatCheckbox}, {key:"id", label:"ID",sortable:true, resizeable:true, width:"50"}, {key:"name", label:"Name",sortable:true, resizeable:true, width:"250"}, {key:"netamount", label:"Amount",sortable:true,resizeable:true,width:"100", formatter:YAHOO.widget.DataTable.formatCurrency} ]; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"checked", parser:YAHOO.util.DataSource.parseBoolean}, {key:"id", parser:YAHOO.util.DataSource.parseNumber}, {key:"name", parser:YAHOO.util.DataSource.parseString}, {key:"amount", parser:YAHOO.util.DataSource.parseNumber} ] }; |
In my case the data is coming via. JSON and I need the default case to be select all. Thus my JSON result set will have checked = true for all rows.
Next here is the code for ‘select all’ and ‘unselect all’. You can be smarter about this and use one function if you care.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<pre style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> myColumnDefs = [ {key:"checked",label:"", width:"30", formatter:YAHOO.widget.DataTable.formatCheckbox}, {key:"id", label:"ID",sortable:true, resizeable:true, width:"50"}, {key:"name", label:"Name",sortable:true, resizeable:true, width:"250"}, {key:"netamount", label:"Amount",sortable:true,resizeable:true,width:"100", formatter:YAHOO.widget.DataTable.formatCurrency} ]; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"checked", parser:YAHOO.util.DataSource.parseBoolean}, {key:"id", parser:YAHOO.util.DataSource.parseNumber}, {key:"name", parser:YAHOO.util.DataSource.parseString}, {key:"amount", parser:YAHOO.util.DataSource.parseNumber} ] }; </code></pre> |
The links on the web page.
|
1 2 3 |
<a id="selectall" href="#" onclick="return selectAll();">Select All</a> &nbsp;|&nbsp; <a id="unselectall" href="#" onclick="return unselectAll();">Unselect All</a> |