软件开发培训班 >> 编程开发 >> JSP


SSM框架整合JSP中集成easyui前端ui项目开发示例详解

鍓嶈█

鍓嶇鐨刄I妗嗘灦寰堝锛屽bootsrap銆乴ayui銆乪asyui绛夛紝杩欎簺妗嗘灦鎻愪緵浜嗗ぇ閲忔帶浠朵緵寮�鍙戜汉鍛樹娇鐢紝鎴戜滑鏃犻渶鑺辫垂澶ぇ鐨勭簿鍔涳紝浣垮緱鎴戜滑鐨勯〉闈㈠叿鏈変笓涓氭爣鍑嗭紝浣跨敤璧锋潵涔熷緢绠�鍗曘�傛墍鏈夌殑鍓嶇妗嗘灦浣跨敤鏂瑰紡鍩烘湰涓婂ぇ鍚屽皬寮傦紝浠ヤ笅浣跨敤easyui浣滀负UI妗嗘灦鍋氫竴婕旂ず锛屼釜浜鸿涓篹asyui鎻愪緵鐨勬帶浠舵瘮杈冨ソ鐪嬨�?/p>

EasyUI涓嬭浇涓庨厤缃?/h2>

浣跨敤EasyUI锛屽繀椤讳笅杞藉叾js鍖咃紝涓嬭浇瀹樼綉鍦板潃锛?a target="_blank" href="https://www.jeasyui.cn/" rel="external nofollow" >https://www.jeasyui.cn/ 涓嬭浇jquery鐗堟湰

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

涓嬭浇寰楀埌鍖咃細jquery-easyui-1.8.6.zip
绀轰緥浣跨敤涓婁竴涓」鐩細鍦╳ebapp鍒涘缓js鐩綍锛屽皢鍖呰В鍘嬪埌姝よ矾寰勪笅锛屽涓嬪浘

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

涓嬭浇閰嶇疆瀹屾垚銆傚疄闄呭紑鍙戜腑娌℃湁蹇呰灏嗗寘涓墍鏈夌殑鏂囦欢寮曞叆锛屾寜闇�寮曞叆鍗冲彲锛屼笂杩板紩鐢ㄦ柟寮忎负浜嗙畝鍗曡�屽凡銆?/p>

椤甸潰缇庡寲

椤甸潰缇庡寲涓紝娑夊強浠ヤ笅浠ｇ爜淇敼锛屽叾浣欑殑涓庝笂鑺備唬鐮佺浉鍚岋紝濡備笅鍥撅細

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

淇敼鍚庣servlet浠ｇ爜锛屼富瑕佸綋鍓嶅墠绔紶閫掓暟鎹富瑕佹柟寮忔槸浣跨敤josn鏍煎紡锛岃繖鏍峰墠绔棤闇�浜嗚В鍚庣鐨刾ojo瀵硅薄锛屼慨鏀瑰悗鐨勪唬鐮佸涓?/p> 

public class StudentServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<StudentEntity> list = new ArrayList<StudentEntity>();
        StudentEntity student = new StudentEntity();
        student.setSno("1");
        student.setsAge(18);
        student.setsSex("鐢?);
        student.setsDept("璁＄畻鏈哄闄?);
        student.setsName("寮犱笁");
        list.add(student);

        StudentEntity student2 = new StudentEntity();
        student2.setSno("2");
        student2.setsAge(18);
        student2.setsSex("濂?);
        student2.setsDept("璁＄畻鏈哄闄?);
        student2.setsName("鏉庡洓");
        list.add(student2);

        StudentEntity student3 = new StudentEntity();
        student3.setSno("3");
        student3.setsAge(18);
        student3.setsSex("鐢?);
        student3.setsDept("鏁颁俊瀛﹂櫌");
        student3.setsName("閽卞叚");
        list.add(student3);

        String str="{"total":"+list.size()+" ,"rows":"+net.sf.json.JSONArray.fromObject(list).toString()+"}";
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(str);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("./jsp/list.jsp").forward(request,response);
    }

浠ｇ爜涓昏鍙樻崲鐨勫湴鏂规湁浠ヤ笅鍑犱釜閮ㄥ垎

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

寮曞叆net.sf.json. jar鍖咃紝鍙渶鍦╬om鏂囦欢涓坊鍔犲涓嬩緷璧栧嵆鍙?/p> 

 <!--json.JSONArray.fromObject闇�瑕佸紩鍏ョ殑jar鍖?->
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
      <classifier>jdk15</classifier>
    </dependency>

淇敼index.jsp鏂囦欢锛屼唬鐮佸涓嬶細

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>娆㈣繋椤甸潰</title>
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="js/demo.css" rel="external nofollow" >
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <style type="text/css">
        .content {
            padding: 10px 10px 10px 10px;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'west',title:'鑿滃崟',split:true" style="width:180px;">
    <ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
        <li>
            <span>瀛︾敓绠＄悊</span>
            <ul>
                <li data-options="attributes:{'url':'student',method:'get'}">瀛︾敓鍒楄〃</li>
            </ul>
        </li>
    </ul>
</div>
<div data-options="region:'center',title:''">
    <div id="tabs" class="easyui-tabs">
        <div title="棣栭〉" style="padding:20px;">
            <h1>javaWeb娴嬭瘯</h1>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        $('#menu').tree({
            onClick: function(node){
                if($('#menu').tree("isLeaf",node.target)){
                    var tabs = $("#tabs");
                    var tab = tabs.tabs("getTab",node.text);
                    if(tab){
                        tabs.tabs("select",node.text);
                    }else{
                        tabs.tabs('add',{
                            title:node.text,
                            href: node.attributes.url,
                            closable:true,
                            bodyCls:"content"
                        });
                    }
                }
            }
        });
    });
</script>

鏍稿績浠ｇ爜璇存槑锛?/p>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

鍦╦sp鐩綍涓嬫坊鍔爈ist.jsp鏂囦欢锛屼唬鐮佸涓嬶細

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<table class="easyui-datagrid" id="itemList" 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'">鎵�鍦ㄩ櫌绯?lt;/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)" rel="external nofollow"  慰nclick="updateFun('+index+')">淇敼</a>';
    };

    function updateFun(index){
       $("#itemList").datagrid("selectRow",index);                   
       var obj = $("#itemList").datagrid("getSelected");        
       alert(obj.sno);                                                               
    };
</script>

杩欎釜jsp涓殑浠ｇ爜骞朵笉鏄竴涓畬鏁寸殑jsp椤甸潰锛屾洿绫讳技涓�涓猟iv涓殑鍐呭銆傚叧閿唬鐮佸涓?/p>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

杩愯缁撴灉

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

鐐瑰嚮瀛︾敓鍒楄〃锛岄〉闈㈠涓嬶細

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

鎬荤粨涓庨棶棰?/h2>

浣跨敤鍓嶆妗嗘灦鑳藉寰堝揩鍐欏嚭姣旇緝涓撲笟缇庤鐨勪唬鐮併�傚凡缁忓緢澶氬勾娌℃湁浣跨敤杩噅query鍜宔asyui浜嗭紝宸茬粡寰堥檶鐢燂紝杩欎釜婕旂ず绋嬪簭鍖栦簡鎴戝ぇ鍗婂ぉ鐨勬椂闂淬�傜幇鍦ㄦ祦琛岀殑鏄墠鍚庣瀹屽叏鍒嗙鐨勫紑鍙戞ā寮忥紝鍓嶆鏁版嵁瀹炵幇鍙屽悜缁戝畾锛屽皢DOM鐨勬搷浣滈殣钘忚捣鏉ワ紝浣跨敤璧锋潵鏇存柟渚匡紝浣嗕笉鍙惁璁query鍦╳eb鍓嶇鐨勫彂灞曞彶涓婂叿鏈夐噷绋嬬鐨勬剰涔夛紝jquery瀵筪om鐨勬搷浣滆繕鏄瀛︿範鐨勩�傛帴涓嬫潵鎴戜滑灏嗚浆鍏ヤ娇鐢⊿SM妗嗘灦涓嬪墠鍚庣瀹屽叏鍒嗙锛屽墠绔互缁勪欢鍖栧紑鍙戜负涓荤殑寮�鍙戞ā寮忎粙缁?/p>

浠ヤ笂灏辨槸SSM妗嗘灦JSP涓泦鎴恊asyui鍓嶇ui椤圭洰寮�鍙戠ず渚嬭瑙ｇ殑璇︾粏鍐呭锛屾洿澶氬叧浜嶴SM妗嗘灦JSP闆嗘垚easyui鍓嶇ui椤圭洰寮�鍙戠殑璧勬枡璇峰叧娉ㄨ剼鏈箣瀹跺叾瀹冪浉鍏虫枃绔狅紒