123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
- <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
- <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
- <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
- <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
- <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function ()
- {
- var jsonObj = {};
- jsonObj.Rows = [
- { id: 3, name: "林三", sex: "男", birthday: "1989/01/12" },
- { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
- { id: 33, name: "啊三", sex: "男", birthday: "1981/12/12" },
- { id: 34, name: "表三", sex: "男", birthday: "1983/01/12" },
- { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
- { id: 33, name: "成三", sex: "男", birthday: "1989/11/23" },
- { id: 34, name: "都三", sex: "女", birthday: "1989/04/12" },
- { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/15" },
- { id: 344, name: "林三", sex: "男", birthday: "1969/02/21" },
- { id: 1, name: "王开", sex: "男", birthday: "1989/01/12" }
- ];
- $("#maingrid").ligerGrid({
- columns: [
- { display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,
- render: function (row)
- {
- var html = '<input type ="checkbox" rowid ="' + row.id + '">';
- return html;
- },
- headerRender: function (column)
- {
- var html = '<input type ="checkbox" onclick="selectAll(this)">';
- return html;
- }
- },
- { display: '主键', name: 'id', width: 50, type: 'int' },
- { display: '名字', name: 'name', width: 50 },
- { display: '性别', name: 'sex', width: 50, isSort: false
- },
- { display: '生日', name: 'birthday', type: 'date', width: 100 },
- {
- display: '模板列', isAllowHide: false,
- render: function (row)
- {
- var html = '<a href="#" onclick="onedit(' + row.id + ')">编辑</a>';
- return html;
- }
- }
- ],width:'100%',
- data: jsonObj,
- pageSizeOptions: [5, 10, 15, 20]
- });
- });
- function selectAll(obj)
- {
- $("#maingrid td[columnname=checkbox]").find(":checkbox").each(function ()
- {
- this.checked = obj.checked;
- });
- }
- function onedit(id)
- {
- alert("您选中的ID是" + id);
- }
- function showalert(content)
- {
- $.ligerMessageBox.alert('提示内容', content);
- }
- function getSelectedIds()
- {
- var rowids = "";
- $("#maingrid .l-grid-row td[columnindex=0]").find(":checkbox").each(function ()
- {
- if (this.checked)
- rowids += $(this).attr("rowid") + ",";
- });
- if (rowids.length > 0) rowids = rowids.substr(0, rowids.length - 1);
- alert(rowids);
- }
- function getSelected()
- {
- var manager = $("#maingrid").ligerGetGridManager();
- var row = manager.getSelectedRow();
- alert("您选择的是:" + row.name + " | " + row.birthday);
- }
- </script>
- </head>
- <body>
- <div id="maingrid"></div>
- <br />
- <a class="l-button" style="width:120px" onclick="getSelectedIds()">获取选中的值(复选框)</a>
- <br />
- <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a> <div style="display:none;">
-
- </div>
- </body>
- </html>
|