You can drag to adjust the width of a table column.
1. Import files:
<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script><script src="/js/store.js" type="text/javascript"></script><script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>
Ii. TABLE
<Table id = "myTable" border = "1"> <thead> <tr> <th data-resizable-column-id = "a"> <input type = "checkbox" /> </th> <th data-resizable-column-id = "B"> column type </th> <th data-resizable-column-id = "c"> activity name </th> <th data-resizable-column-id = "d"> Status </th> <th data-resizable-column-id = "e"> operation option </th> </tr> </thead> <tbody> <tr> <td> <input type = "checkbox"/> </td> <td> youth Diary </td> <td> 2014 youth diary essay </td> <td> submit </td> <td> review </td> </tr> <td> <input type = "checkbox"/> </td> <td> my child's growth story </td> <td> pass </td> <td> review </td> </tr> </tbody> </table>
The above html is only used as a Demo and is not actually used in my project, and cannot be implemented during testing. Depressing...
3. Implement table dragging
<script type="text/javascript"> $(function(){$("#myTable").resizableColumns({ store: window.store}); })</script>
During project usage, you do not need to introduce the store. js <th> or the data-resizable-column-id attribute.
And $ ("# myTable"). resizableColumns ();
Required documents: http://download.csdn.net/detail/itmyhome/7390263
Extract two files
Jquery. resizableColumns. js is in the \ jquery-resizable-columns-gh-pages \ dist path.
Store. js is in the store. js-master path
Welcome to the JAVA technology exchange group: 74955800