有时候在开发的过程中会遇到需要根据状态ID 来动态改变数据表格的按钮,下面我主要讲述两种表格根据ID改变按钮的方式。
下面这种我是用EL 表达式获取表格中的值:
<table class="table table-striped table-bordered table-hover" id="sample-table"> <tr><td width="60px">ID</td><td width="60px">真实姓名</td><td width="80px">身份证号码</td><td width="60px">状态</td> <td width="60px">时间</td> <td width="60px">操作</td></tr> <c:forEach items="${userautonyms}" var="userautonym"><tr> <td>${userautonym.userID }</td><td>${userautonym.trueName }</td><td>${userautonym.identityCard }</td><td>${userautonym.examineStatename }</td> <td>${userautonym.apply }</td><td class="td-manage"><c:if test="${(userautonym.examineStateID == '1')}"><!--审核成功--><a title="修改" href="javascript:;" onclick="member_del('${userautonym.userAthenticationID }')" class="btn btn-xs btn-danger"><i class="fa fa-edit bigger-120"></i></a><a title="查看" href="javascript:;" onclick="member_ck('${userautonym.userAthenticationID }')" class="btn btn-xs warning"><i class="fa fa-cubes bigger-120"></i></a> </c:if><c:if test="${(userautonym.examineStateID == '2')}"><!--审核失败--><a title="查看" href="javascript:;" onclick="member_ck('${userautonym.userAthenticationID }')" class="btn btn-xs warning" ><i class="fa fa-cubes bigger-120"></i></a> </c:if><c:if test="${(userautonym.examineStateID == '3')}"><!--待审核--><a title="审核" href="javascript:;" onclick="member_d('${userautonym.userAthenticationID }')" class="btn btn-xs btn-success"><i class="fa fa-check bigger-120"></i></a> <a title="修改" href="javascript:;" onclick="member_del('${userautonym.userAthenticationID }')" class="btn btn-xs btn-danger" ><i class="fa fa-edit bigger-120"></i></a><a title="查看" href="javascript:;" onclick="member_ck('${userautonym.userAthenticationID }')" class="btn btn-xs warning"><i class="fa fa-cubes bigger-120"></i></a> </c:if></td></tr> </c:forEach>
</table>
当审核状态为待审核,显示下面操作(允许审核,修改,查看)。
当审核状态为审核成功,显示下面操作(允许修改,查看)。
当审核状态为审核失败,显示下面操作(允许查看)。
下面的这种是在layui 中数据表格操作,所以需要将对应的css,js插件引用进来,表格这里就不详细描述,状态ID 需要在表格中存在。
<script type="text/html" id="barDemo">{{# if(d.examineStateID == '1'){ }}<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>{{# } }}{{# if(d.examineStateID == '2'){ }}<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>{{# } }}{{# if(d.examineStateID == '3'){ }}<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">审核</a><a class="layui-btn layui-btn-xs" lay-event="edit">修改</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } }}
</script>
如下所示:当状态为待审核,显示审核,修改,删除操作,为审核成功或者审核失败,显示删除与删除操作。