YUI DataTable w/ Checkbox Column, example 2
Fiddle demonstrating YUI3 DataTable featuring a checkbox column using a formatter function to return the checkboxes
by harsh dand
HTML
<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<div class="example yui3-skin-sam">
<div id="dtable"></div>
<button id="btnSelected" class="yui3-button">Process Selections</button>
<button id="btnClearSelected" class="yui3-button">Clear Selections</button>
<button id="btnAdd" class="yui3-button">Add a Record</button>
<button id="btnRefresh" class="yui3-button">Refresh</button>
<h4>Processed:</h4>
<ul id="processed">
<li>(None)</li>
</ul>
</div>
CSS
.yui3-skin-sam .yui3-datatable-col-select {
text-align: center;
}
#processed {
margin-top: 2em;
border: 2px inset;
border-radius: 5px;
padding: 1em;
list-style: none;
}
/* This SHOULD color the selected row */
.yui3-skin-sam .selected-row .yui3-datatable-cell {
background: #c10;
color: #fff;
}
JavaScript
YUI().use("datatable-sort", "datatable-scroll", "datatable-mutable", "cssbutton", function (Y) {
var ports = [{
port: 20,
pname: 'FTP_data',
ptitle: 'File Transfer Process Data'
}, {
port: 21,
pname: 'FTP',
ptitle: 'File Transfer Process'
}, {
port: 22,
pname: 'SSH',
ptitle: 'Secure Shell'
}, {
port: 23,
pname: 'TELNET',
ptitle: 'Telnet remote communications'
}, {
port: 25,
pname: 'SMTP',
ptitle: 'Simple Mail Transfer Protocol'
}, {
port: 43,
pname: 'WHOIS',
ptitle: 'whois Identification'
}, {
port: 53,
pname: 'DNS',
ptitle: 'Domain Name Service'
}, {
port: 68,
pname: 'DHCP',
ptitle: 'Dynamic Host Control Protocol'
}, {
port: 79,
pname: 'FINGER',
ptitle: 'Finger Identification'
}, {
port: 80,
pname: 'HTTP',
ptitle: 'HyperText Transfer Protocol'
}, {
port: 110,
pname: 'POP3',
ptitle: 'Post Office Protocol v3'
}, {
port: 115,
pname: 'SFTP',
ptitle: 'Secure File Transfer Protocol'
}, {
port: 119,
pname: 'NNTP',
ptitle: 'Network New Transfer Protocol'
}, {
port: 123,
pname: 'NTP',
ptitle: 'Network Time Protocol'
}, {
port: 139,
pname: 'NetBIOS',
ptitle: 'NetBIOS Communication'
}, {
port: 143,
pname: 'IMAP',
ptitle: 'Internet Message Access Protocol'
}, {
port: 161,
pname: 'SNMP',
ptitle: 'Simple Network Management Protocol'
}, {
port: 194,
pname: 'IRC',
ptitle: 'Internet Relay Chat'
}, {
port: 220,
pname: 'IMAP3',
ptitle: 'Internet Message Access Protocol v3'
}, {
port: 389,
pname: 'LDAP',
ptitle: 'Lightweight...