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>
html+js代码

相关文章:

  • 2021-07-31
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-09
  • 2021-12-16
  • 2022-12-23
  • 2021-11-21
相关资源
相似解决方案