layui的table实现，strust2+layui+jsp

最新推荐文章于 2024-09-25 16:06:10 发布

原创最新推荐文章于 2024-09-25 16:06:10 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

struts2+jsp+layui 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何结合Struts2框架和layui前端库，在jsp页面中实现一个功能性的表格展示。通过示例代码展示了前台界面的HTML及后台JavaScript的实现，并提到了Struts2的配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table表格其实还是很好实现的，先看效果吧

在这里插入图片描述

前台界面的代码如下：

<body>
 <input type="hidden" id="sd" value="${pageContext.request.contextPath}">
	<form id="" class="layui-form" action=""> 
	<div align="right">
	 
	   <button class="layui-btn" data-type="reload">新建</button>
	   <button class="layui-btn" data-type="alldel">查询</button>
	</div>
	<br>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">客户名称</label>
				<div class="layui-input-inline">
					<input id="chc_cust_name"  name="chc_cust_name" type="text" style="width: 190px" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">概要</label>
				<div class="layui-input-inline">
					<input id="chc_title"  name="chc_title" type="text" style="width: 190px" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">联系人</label> 
				<input id="chc_linkman"  name="chc_linkman"  type="text" style="width: 190px" autocomplete="off" class="layui-input">
			
			</div>
		</div>
	</form>
	
	<table class="layui-table"  id="demoTable" lay-filter="demoTable" lay-data="{id: 'idTest'}">
	</table>
	<script type="text/html" id="barDemo">
	 <div id="barDemo">
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="apo"><i class="layui-icon layui-icon-face-smile"></i>指派</a>  
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-edit"></i>编辑</a>
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-delete"></i>删除</a>
   </div>
   </script>
</body>

后台的js如下：

 layui.use(['table', 'form'], function() {
         var table = layui.table;
         layer = layui.layer;
         form = layui.form;
         
         table.render({
             elem : '#demoTable',
             url : sd+'/sy/salesAction_findSalChange.action',
//             toolbar: '#barDemo',
             even : true,
             page : true, //是否显示分页
             limits : [ 5, 10 ], //控制多少行一页（默认五条一页）
             limit : 5 ,//每页默认显示的数量,
             cols : [[
            {  field: 'chc_id', title: '编号',width:80, sort: true},
            {  field: 'chc_cust_name',title: '客户名称',width:120,sort: true},  
            {  field: 'chc_title',title: '概要',width:185},
            {  field: 'chc_linkman',title: '联系人',width:90, sort: true}, 
            {  field: 'chc_tel',title: '联系人电话',width:150, sort: true}, 
            {  field: 'chc_create_date',title: '创建时间',width:180,sort: true},  
            {fixed: 'right', title:'操作', toolbar: '#barDemo', width:220},
           ]],//field是实体类属性
           id:'tableReload',
            
         });
         });

struts2 的xml

<!-- salesAction -->
	<action name="salesAction_*" class="com.zking.web.SalesAction"  method="{1}" >
	      <result name="changeManage">/jsp/sales/changeManage.jsp</result>
	</action>