ssm整合3.easyui

用户9184480

发布于 2024-12-13 11:16:28

7300

代码可运行

运行总次数：0

代码可运行

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
  <script type="text/javascript" src="easyui/jquery-1.8.3.min.js"></script>   
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<!--需要在head里面添加easyui的引用-->

<body>
    数据条数：${size }
    <table id="dg" class="easyui-datagrid" toolbar="#tb"
    fitColumns="true" rownumbers="true" pagination="true" 
       title="员工列表" style="width:700px;height:250px"
  data-options="singleSelect:true,collapsible:true,
  url:'emp.json',method:'get'">
    <thead>
      <tr>
        <th data-options="field:'empno',width:180">编号</td>
        <th data-options="field:'ename',width:120">姓名</td>
        <th data-options="field:'sal',width:180">工资</td>
        <th data-options="width:200">操&nbsp;&nbsp;作</th>
      </tr></thead>
    </table>
  </body>
    fitColumns="true" rownumbers="true" pagination="true" 
       title="员工列表" style="width:700px;height:250px"
  data-options="singleSelect:true,collapsible:true,
  url:'emp.json',method:'get'">
    <thead>
      <tr>
        <th data-options="field:'empno',width:180">编号</td>
        <th data-options="field:'ename',width:120">姓名</td>
        <th data-options="field:'sal',width:180">工资</td>
        <th data-options="width:200">操&nbsp;&nbsp;作</th>
      </tr></thead>
    </table>
  </body>

<!--注意field是对应json的数据-->

//控制器代码

@RequestMapping("/json") @ResponseBody public List<Emp> getEmps(){ List<Emp>empList=service.getList(); return empList; }

不使用json格式，自己写循环操作。

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
   data-options="method:'get',singleSelect:true">
      <thead>
         <tr>
            <th data-options="field:'t1',width:80">编号</th>
            <th data-options="field:'t2',width:100">产品</th>
            <th data-options="field:'t3',width:80,align:'right'">价格</th>
            <th data-options="field:'t4'">操作</th>
         </tr>
      </thead>
      <!-- 写循环; -->
       <c:forEach items="${list }" var="emp">
      <tr>
         <td>${emp.empno }</td>
         <td>${emp.ename }</td>
         <td>${emp.sal }</td>
         <td>
            <a href='emp/toAddEmp'>增加</a>
            <a href='emp/getEmp/${emp.empno}'>编辑</a>
            <a href='emp/${emp.empno}/deleteEmp'>删除</a>
            <a href='emp/deleteEmp2?empno=${emp.empno}'>删除2</a>
         </td>
      </tr>
      </c:forEach>
   </table>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除

data