templategrid.htm 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  6. <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  7. <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  8. <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
  9. <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
  10. <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. $(function ()
  13. {
  14. var jsonObj = {};
  15. jsonObj.Rows = [
  16. { id: 3, name: "林三", sex: "男", birthday: "1989/01/12" },
  17. { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
  18. { id: 33, name: "啊三", sex: "男", birthday: "1981/12/12" },
  19. { id: 34, name: "表三", sex: "男", birthday: "1983/01/12" },
  20. { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
  21. { id: 33, name: "成三", sex: "男", birthday: "1989/11/23" },
  22. { id: 34, name: "都三", sex: "女", birthday: "1989/04/12" },
  23. { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/15" },
  24. { id: 344, name: "林三", sex: "男", birthday: "1969/02/21" },
  25. { id: 1, name: "王开", sex: "男", birthday: "1989/01/12" }
  26. ];
  27. $("#maingrid").ligerGrid({
  28. columns: [
  29. { display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,
  30. render: function (row)
  31. {
  32. var html = '<input type ="checkbox" rowid ="' + row.id + '">';
  33. return html;
  34. },
  35. headerRender: function (column)
  36. {
  37. var html = '<input type ="checkbox" onclick="selectAll(this)">';
  38. return html;
  39. }
  40. },
  41. { display: '主键', name: 'id', width: 50, type: 'int' },
  42. { display: '名字', name: 'name', width: 50 },
  43. { display: '性别', name: 'sex', width: 50, isSort: false
  44. },
  45. { display: '生日', name: 'birthday', type: 'date', width: 100 },
  46. {
  47. display: '模板列', isAllowHide: false,
  48. render: function (row)
  49. {
  50. var html = '<a href="#" onclick="onedit(' + row.id + ')">编辑</a>';
  51. return html;
  52. }
  53. }
  54. ],width:'100%',
  55. data: jsonObj,
  56. pageSizeOptions: [5, 10, 15, 20]
  57. });
  58. });
  59. function selectAll(obj)
  60. {
  61. $("#maingrid td[columnname=checkbox]").find(":checkbox").each(function ()
  62. {
  63. this.checked = obj.checked;
  64. });
  65. }
  66. function onedit(id)
  67. {
  68. alert("您选中的ID是" + id);
  69. }
  70. function showalert(content)
  71. {
  72. $.ligerMessageBox.alert('提示内容', content);
  73. }
  74. function getSelectedIds()
  75. {
  76. var rowids = "";
  77. $("#maingrid .l-grid-row td[columnindex=0]").find(":checkbox").each(function ()
  78. {
  79. if (this.checked)
  80. rowids += $(this).attr("rowid") + ",";
  81. });
  82. if (rowids.length > 0) rowids = rowids.substr(0, rowids.length - 1);
  83. alert(rowids);
  84. }
  85. function getSelected()
  86. {
  87. var manager = $("#maingrid").ligerGetGridManager();
  88. var row = manager.getSelectedRow();
  89. alert("您选择的是:" + row.name + " | " + row.birthday);
  90. }
  91. </script>
  92. </head>
  93. <body>
  94. <div id="maingrid"></div>
  95. <br />
  96. <a class="l-button" style="width:120px" onclick="getSelectedIds()">获取选中的值(复选框)</a>
  97. <br />
  98. <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a> <div style="display:none;">
  99. </div>
  100. </body>
  101. </html>