7b46c6fc659e305dd2f20e49779384929c20be7d.svn-base 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Transform DataGrid from Table - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery.min.js"></script>
  10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Transform DataGrid from Table</h2>
  14. <p>Transform DataGrid from an existing, unformatted html table.</p>
  15. <div style="margin:20px 0;">
  16. <a href="javascript:;" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transform</a>
  17. </div>
  18. <table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
  19. <thead>
  20. <tr>
  21. <th data-options="field:'itemid'">Item ID</th>
  22. <th data-options="field:'productid'">Product</th>
  23. <th data-options="field:'listprice',align:'right'">List Price</th>
  24. <th data-options="field:'attr1'">Attribute</th>
  25. </tr>
  26. </thead>
  27. <tbody>
  28. <tr>
  29. <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
  30. </tr>
  31. <tr>
  32. <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
  33. </tr>
  34. <tr>
  35. <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
  36. </tr>
  37. <tr>
  38. <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
  39. </tr>
  40. <tr>
  41. <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. </body>
  46. </html>