欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javaWeb核心技术第十四篇之easyui

程序员文章站 2022-08-03 20:54:32
网站是分为网站的前台和网站的后台. 前台--给用户看的 例如:商城 后台--给管理员看的 例如:商城后台 目的:用来添加维护数据 BootStrap:jsp 页面显示,效果好,美观,适合作为用户界面. EasyUI : jsp页面,快速开发,格式统一,美观效果一般. EasyUI里面有很多组件(功能... ......
网站是分为网站的前台和网站的后台.
        前台--给用户看的   例如:商城
        后台--给管理员看的  例如:商城后台  目的:用来添加维护数据
    
    bootstrap:jsp 页面显示,效果好,美观,适合作为用户界面.
    easyui : jsp页面,快速开发,格式统一,美观效果一般.
    
    easyui里面有很多组件(功能模块):有自己的特使,但编写简单,只需固定html代码结构.
    
    easyui环境搭建:
        1.导入css , 需要2个css
        2.导入jquery,需要2个js
            <link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/css/easyui.css">
            <link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/css/icon.css">
            <link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/css/demo.css">
            <script type="text/javascript" src="${pagecontext.request.contextpath}/js/jquery.min.js"></script>
            <script type="text/javascript" src="${pagecontext.request.contextpath}/js/jquery.easyui.min.js"></script>
                
    easyui的定义方式:
        easyui规定:我们只需要提供简单html代码结构,就可以生成特殊的效果.
            easyui的定义方式:
                1.html代码结构.
                    1.1:需要有class="easyui-*"  *表示组件的名称.
                    1.2:easyui提供另外一个属性:data-options:里面可以写easyui提供的属性.
                        data-options格式:json格式:key:value,key:value......
                
                2.js渲染.
                    2.1:语法 : 对象.组件名称();
                    2.2:语法 : 对象.组件名称({key:value,key:value.....});
                
                例如:
                    html例子:
                    <div class="easyui-window" data-options="title:'this is 标题',width:200,height:400"></div>
                    
                    js例子:
                    <div id="mydiv"></div>
                    <script>
                        //如果使用js渲染,语法 : 对象.组件名称({key:value,key:value.....});
                        $("#mydiv").window({
                            title:'这是新的标题',
                            width:400,
                            height:400
                        });
                    </script>    
    easy--属性--事件--方法:
        easyui的属性 : 事件,方法
            属性 : 组件自身特点,事件和属性可以写在一起,格式:key:value,key:value....
            事件 : (被动)完成某件事情后触发的动作.
                $(对象).组件名称({
                    属性:属性值,
                    属性:属性值,
                    事件:函数
                })
            
            方法:(主动)主动完成某件事件.
            语法:
                $(对象).组件名称(方法名称,方法的参数)
                
            <div class="easyui-dialog" data-options="width:200,height:200",onbeforeclose:function(){
                    alert('窗口即将关闭');
            }"></div>
            
            例如:
                <div id="mydiv2"></div>
                <input type="button" value="关闭窗口" onclick="closedialog()">
                <input type="button" value="打开窗口" onclick="opendialog()">
                //事件
                <script type="text/javascript">
                    $("#mydiv2").dialog({
                        width:200,
                        height:200,
                        onbeforeclose:function(){
                            alert('窗口即将关闭')
                        }
                    });
                
                function closedialog() {
                    //方法设置的标准语法 : $(对象).组件名称(方法名称[,方法的值])
                    $("#mydiv2").dialog("close");
                
                }
                function opendialog() {
                    $("#mydiv2").dialog("open");
                }
        </script>
    
    表单:
        默认情况下,表单是传统表单,传统表单同步,easyui的表单是异步的.
        <script>
            $("#ff").from({
                url:"${pagecontext.request.contextpath}/demoservlet",//等效action属性,表单提交的路径.
                onsubmit : function() {
                    //在此处可以做效验,表单提交前效验.
                    //alert(1);
                    //return false;
                },
                success:function(data) {
                    //回调函数,此处是没有判断状态码为200情况,以后是需要判断data值.
                    alert(data)
                }
            });
        </script>
    tabs:选项卡
        <script>
            function addtabs(){
                var flag = $("#tt").tabs("exists","工资条");
                
                if(flag){
                    //如果面板已经存在,选中该面板
                    $("#tt").tabs("select","工资条");
                }else{
                    //如果面板不存在,添加面板
                    $("#tt").tabs("add",{
                        title : "工资条",  //标题
                        content : "tab body",  //内容
                        closable : true  //是否可以关闭
                        
                    });
                }
                
            }
        </script>
            
    下拉框:
        <input id="cc" name="dept" value="请选择">
            <script>
                $("#cc").combobox({
                    //可以加载远程事件,支持json   easyui都支持json
                    url:"combobox_data.json",
                    valuefield : "id", //对应value值,需要将json的key放在此处,  // <option value="">文本</option>
                    textfiedld : "name"  //将要显示的文本的key放在此处
                    
                });
            </script>
    
    datagrid:数据表单
        url : 加载远程的数据,支持json
            表格中的field的字段名称,必须和json的一致,如果一致,表单将自动填充json数据.
        <table class="easyui-datagrid" data-options="url:'datagrid_data.json',fit:true">
            <thead>
                <tr>
                    <th data-options="field:'id',width:100">编码</th>
                    <th data-options="field:'name',width:100">名称</th>
                    <th data-options="field:'age',width:100,align:'right'">价格</th>
                    <th data-options="field:'pimage',width:100,align:'right',formatter:function( value , rows , index){ return '<img src='+value + '>';}">图片</th>
                </tr>
            </thead>
        </table>
    
    <table id="dg"></table>
        value : 表示当前json的值
        rows : 表示当前行的对象
        index : 表示当前行的索引
    <script>
        $('#dg').datagrid({    
            url:'datagrid_data.json', //url : 加载远程的数据 支持json     
            columns:[[    
                {field:'id',title:'id',width:100},    
                {field:'name',title:'name',width:100},    
                {field:'age',title:'age',width:100,align:'right'}, 
                {field:'pimage',title:'pimage',width:100,align:'right',
                    formatter:function(value , rows , index){
                        return  "<img src='"+value+"' style='width:40px'>";
                       }    
                }    
            ]],
            fit:true ,//表格自动填充
            fitcolumns:true, //列自动填充
            autorowheight:true,//高度填充
            toolbar:[{
                iconcls: 'icon-edit',
                handler: function(){alert('编辑按钮')}
            },'-',{
                iconcls: 'icon-help',
                handler: function(){alert('帮助按钮')}
            }],
            singleselect:true, //只能选择一个
            pagination:true,//页面的底部加上分页条
            pagenumber:1, //默认打开第一页
            pagesize:5,
            pagelist:[5,10,15,20,25,30]
        });  
    </script>
    
    后台代码:
        接收的分页参数:
        响应回去的数据:
        
    protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
        try {
            //问题1: 页面需要传入 pagesize 和 pagenumber
            //问题2: 响应数据 是什么? 页面需要什么数据来进行分页
            
            //0.编码
            request.setcharacterencoding("utf-8");
            response.setheader("content-type", "text/html;charset=utf-8");
            //1.获得数据
            string pagenumberstr = request.getparameter("page");
            string pagesizestr = request.getparameter("rows");
            
            int pagenumber = integer.valueof(pagenumberstr);
            int pagesize = integer.valueof(pagesizestr);
            
            //int pagenumber= 1;
            //int pagesize = 5;
            
            //2.处理数据
            productservice service = new productservice();
            //list<product> plist = service.findall();
            //如果响应回去的只是list 不会进行分页
            //list<product> plist = service.findbypage( pagenumber , pagesize);
            easyuipagebean<product> easyuipagebean = service.findbyeasyuipage( pagenumber , pagesize);
            
            //需要响应的数据{total:28 , "rows" : [ {} , {} ,{} ]}   ==>> 可以使用map 也可以封装对象
            //但目前是           [{key:value,key:value},{key:value,key:value}..]
            
            
            //3.响应
            gson gson = new gson();
            string json = gson.tojson(easyuipagebean);
            system.out.println(json);
            response.getwriter().print(json); 
        } catch (exception e) {
            e.printstacktrace();
        }
    
    }