<%@ page contentType="text/html;charset=UTF-8" language="java" %> <table title="学生列表" opts.striped="true" fitColumns="true" data-options="singleSelect:true,collapsible:true,url:'student',method:'post',toolbar:toolbar"> <thead> <tr> <th data-options="field:'sno',width:80">学号</th> <th data-options="field:'sName',width:100,align:'left'">姓名</th> <th data-options="field:'sSex',width:100,align:'center'">性别</th> <th data-options="field:'sAge',width:100,align:'right'">年龄</th> <th data-options="field:'sDept',align:'left'">所在院系</th> <th data-options="field:'operation',width:80,align:'center',formatter:formatOper">操作</th> </tr> </thead> </table> <script type="text/javascript"> var toolbar = [{ text:'新增', iconCls:'icon-add', handler:function(){alert('add')} },{ text:'删除', iconCls:'icon-cut', handler:function(){alert('cut')} },'-',{ text:'保存', iconCls:'icon-save', handler:function(){ alert('save')} }]; function formatOper(val,row,index){ return '<a href="javascript:void(0)" οnclick="updateFun('+index+')">修改</a>'; }; function updateFun(index){ $("#itemList").datagrid("selectRow",index); var obj = $("#itemList").datagrid("getSelected"); alert(obj.sno); }; </script>
这个jsp中的代码并不是一个完整的jsp页面，更类似一个div中的内容。关键代码如下
点击学生列表，页面如下：
使用前段框架能够很快写出比较专业美观的代码。已经很多年没有使用过jquery和easyui了，已经很陌生，这个演示程序化了我大半天的时间。现在流行的是前后端完全分离的开发模式，前段数据实现双向绑定，将DOM的操作隐藏起来，使用起来更方便，但不可否认jquery在web前端的发展史上具有里程碑的意义，jquery对dom的操作还是要学习的。接下来我们将转入使用SSM框架下前后端完全分离，前端以组件化开发为主的开发模式介绍
以上就是SSM框架JSP中集成easyui前端ui项目开发示例详解的详细内容，更多关于SSM框架JSP集成easyui前端ui项目开发的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: