Jquery easyui从零单排之datagrid添加行单击事件
2015-12-14 09:34
911 查看
给datagrid添加行单击事件
单击事件的代码
我这里只是通过单击事件把UserName和LoginID显示出来,当然你也可以把它们传向处理程序中进行其他操作。
一般处理程序的代码在这里就不复述了,前面几篇里面都有。
一、前台代码:
<head> <meta charset="UTF-8"> <title>Start from zero</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> </head> <body> <form id="fm"> <table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true" showfooter="true" style="width: 640px; height: 600px" data-options=" <span style="white-space:pre"> </span>remoteSort:false, rownumbers:true, <span style="white-space:pre"> </span>singleSelect:true, <span style="white-space:pre"> </span>autoRowHeight:true, <span style="white-space:pre"> </span>pagination:true, showFooter: true, fitColumns: true, <span style="white-space:pre"> </span>pageSize:20"> <thead frozen="true"> <tr> <th data-options="field:'ck',checkbox:true,width:40"> </th> <th data-options="field:'LoginID',width:100" sortable="true"> LoginID </th> </tr> </thead> <thead> <tr> <th data-options="field:'UserName',width:120" sortable="true"> UserName </th> <th data-options="field:'Sex',align:'center',width:80" sortable="true"> Sex </th> <th data-options="field:'Department',width:140" sortable="true"> Department </th> <th data-options="field:'Age',width:80" sortable="true"> Age </th> </tr> </thead> </table> <script type="text/javascript"> function getData() { $('#dg').datagrid({ url: 'Handler.ashx', method:'get', striped: true, title: "员工列表", onClickRow: function (rowIndex) { var row = $('#dg').datagrid('getSelected'); if (row) { alert('UserName:' + row.UserName + "\n LoginID:" + row.LoginID); } } }) } function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') {<span style="white-space:pre"> </span>// is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage: function (pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber: pageNum, pageSize: pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } $(function () { $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData()); }); </script> <div id="dlg"> </div> <input name="Test" id="test" type="hidden" /> </form> </body> </html>
单击事件的代码
onClickRow: function (rowIndex) { var row = $('#dg').datagrid('getSelected'); if (row) { alert('UserName:' + row.UserName + "\n LoginID:" + row.LoginID); } }
我这里只是通过单击事件把UserName和LoginID显示出来,当然你也可以把它们传向处理程序中进行其他操作。
一般处理程序的代码在这里就不复述了,前面几篇里面都有。
二、运行结果:
相关文章推荐
- jquery点击click事件和blur事件冲突如何解决
- $.map()函数——JQuery
- 【今日计划】学习jQuery与Ajax的应用
- jQuery滚动加载图片实现原理
- jQuery点击按钮弹出遮罩层且内容居中特效
- jquery实现倒计时效果
- 如何解决jquery版本冲突
- 记录-springMVC访问web-inf下文件问题+在jsp页面导入jquery插件路径不对问题
- jquery实现倒计时效果
- jQuery点击按钮弹出遮罩层且内容居中特效
- jQuery滚动加载图片实现原理
- jQuery position() 函数详解以及jQuery中position函数的应用
- jQuery+json实现的简易Ajax调用实例
- jquery.md5.js
- 使用JQuery UI插件以拖动的方式管理图片8-9
- jQuery HTML 操作
- jQuery 效果 - 来自本页
- jquery的autocomplete使用示例
- jquery 下拉值联动
- jQuery 函数