1、html+js代码:
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/icon.css"> <script src="~/jquery-easyui-1.5.3/jquery.min.js"></script> <script src="~/jquery-easyui-1.5.3/jquery.easyui.min.js"></script> </head> <body> <div style="margin-bottom:20px"> 姓名:<input class="easyui-textbox" id="btnSearchName" style="width:150px;height:32px;"> <input type="button" value="搜索" onclick="search()" /> </div> <table id="dg" title="列表" class="easyui-datagrid" style="width:100%;"> </table> <script> var params = {}; $(function () { loadData(params); }); function loadData(params) { $('#dg').datagrid({ url: '/Page/GetPageData',//数据请求地址 method: 'post', pagination: true,//分页显示 fitColumns: true,//自动适应宽度 autoRowHeight: true,//自动行高度 loadMsg: '正在加载...', nowrap: true,//设置为true 有利于提高性能 idField: 'Number',//字段标识 rownumbers: true,//显示行号 singleSelect: true,//只允许选择一行 pageNumber: 1,//初始化页面数量 pageSize: 10,//初始化显示条数 pageList: [10, 20, 30, 40, 60],//分页列表 columns: [[ { field: 'Name', title: '姓名', width: 50 }, { field: 'Number', title: '工号', width: 50 }, { field: 'action', title: '操作', width: 10, align: 'center', formatter: function (value, row, index) { //row.ID,数据id(主键) var a = '<a href="#" onclick="edit(' + row.ID + ')">Edit</a> '; var b = ' <a href="#" onclick="del(' + row.ID + ')">Delete</a>'; return a + b; } } ]], queryParams: params //参数 }); } function search() { var name = $("#btnSearchName").val(); params.name = name; loadData(params); } function edit(id) { alert(id); } function del(id) { alert(id); } </script> </body> </html>