JQuery插件:TableEditor試用
這個(gè)插件在JQuery1.5.1版下無法使用。
項(xiàng)目地址:http://dev.iceburg.net/jquery/tableEditor/demo.php
html文件:
html<table id="editableTable" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th name="ID">ID</th> <th name="first">First Name</th> <th name="last">Last Name</th> <th>Phone</th> <th name="city">City</th> <th name="email">Email</th> </tr> <tr> <td><key>233</key> <button class="eventLink">edit</button></td> <td><input type="text" name="XXXX" val="YYYY"></input></td> <td>XXX</td> <td><input type="checkbox" checked name="zzTop"></input></td> <td><input type="checkbox" name="yyy"></input></td> <td><select name="yyy"><option>XXX</option><option SELECTED>YYY</option></select></td> </tr> </thead> <tbody> <tr> <td><key>1</key> <button class="eventLink">edit</button></td> <td>Brice</td> <td>Burgess</td> <td>(800)768-5283</td> <td>Milwaukee</td> <td>b@b.com</td> </tr> <tr> <td><key>2</key> <button class="eventLink">edit</button></td> <td>Christian</td> <td>Bach</td> <td>(800)768-6288</td> <td>Chicago</td> <td>c@c.com</td> </tr> <tr> <td><key>3</key> <button class="eventLink">edit</button></td> <td>Abe</td> <td>Lincoln</td> <td>(800)223-2331</td> <td>Washington D.C.</td> <td>l@l.com</td> </tr> <tr> <td><key>8</key> <button class="eventLink">edit</button></td> <td>Sam Lightning</td> <td>Hopkings</td> <td>(800)728-1221</td> <td>Houston</td> <td>s@s.com</td> </tr> <tr> <td><key>15</key> <button class="eventLink">edit</button></td> <td>Rudyard</td> <td>Kipling</td> <td>(512)121-1280</td> <td>London</td> <td>r@r.com</td> </tr> </tbody> </table>
js文件
js<script type="text/javascript"> $().ready(function() { $("#editableTable").tableSorter({ sortClassAsc: 'headerSortUp', // class name for ascending sorting action to header sortClassDesc: 'headerSortDown', // class name for descending sorting action to header headerClass: 'header', // class name for headers (th's) disableHeader: 'ID' // DISABLE Sorting on ID }).tableEditor({ EDIT_HTML: 'edit', SAVE_HTML: 'save', EVENT_LINK_SELECTOR: 'button.eventLink', FUNC_UPDATE: 'updateTable' }); document.counter = 0; }); function updateTable(o) { document.counter++; if ((document.counter%2) == 0) { // restore row alert('Update failed. Row restore.'); $.tableEditor.lib.restoreRow(o.row,o.original); } else alert('Update Success'); return true; } </script>
posted on 2011-04-09 06:27 jack zhai 閱讀(2761) 評(píng)論(1) 編輯 收藏 所屬分類: java web