俩UI

首先我们考虑一下在项目投票种用到的属性(ID,投票标题,备选项目,参与人数)

entity

复制代码
package cn.entity;

public class GridNode {
    private Long id;
    private String title;
    private Integer type ;
    private String version;
    private String options;
    private String participants;
    
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getVersion() {
        return version;
    }
    public void setVersion(String version) {
        this.version = version;
    }
    public String getOptions() {
        return options;
    }
    public void setOptions(String options) {
        this.options = options;
    }
    public String getParticipants() {
        return participants;
    }
    public void setParticipants(String participants) {
        this.participants = participants;
    }
    public GridNode() {
        super();
        // TODO Auto-generated constructor stub
    }
    public GridNode(Long id, String title, Integer type, String options,
            String participants) {
        super();
        this.id = id;
        this.title = title;
        this.type = type;
        this.options = options;
        this.participants = participants;
    }
    public GridNode(Long id, String title, String options, String participants) {
        super();
        this.id = id;
        this.title = title;
        this.options = options;
        this.participants = participants;
    }
    public Integer getType() {
        return type;
    }
    public void setType(Integer type) {
        this.type = type;
    }
    

}
复制代码

编写sl7.jsp(实现基础及配置)

复制代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'sl7.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/css/demo.css">
<script src="<%=path%>/js/jquery-1.8.3.js"></script>
<script src="<%=path%>/js/jquery.easyui.min.js"></script>

<script>
$(function(){
$('#dg').datagrid({    //远程请求数据的url路径
url:'<%=path%>/SL/sl7_server.jsp', 
pagination:true, //显示底部分页栏
pageSize:5,    //默认每页记录数
pageList:[5,10,15], //显示列表记录数的下拉框选项
columns:[[
{field:'ck',checkbox:true},
{field:'title',title:'投票标题',width:408},
{field:'options',title:'备选项数',width:60,align:'center'},
{field:'participants',title:'参与人数',styler:myStyler}
]],
singleSelect:true,
rownumbers:true,
iconCls: 'icon-search',
fitColumns:true,//自适应宽度，防止水平滚动
striped:true,//隔行变色
loadMsg:"正努力为您加载中......"
});
});

function myStyler(value,row,index){
if (value < 5){
return 'color:red;';
}else if(value > 15){
return 'color:green;';
}
}
</script>

</head>

<body>
<table id="dg" title="投票列表" class="easyui-grid" style="width:700px;height:215px"></table> 
</body>
</html>
复制代码

 

编写josn(添加数据与分页页数的配置)

复制代码
<%@ page language="java" import="java.util.*,cn.entity.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%
List<GridNode> list = new ArrayList<GridNode>();
list.add(new GridNode(1L,"选出你心目中最好的下载工具","2","6"));
list.add(new GridNode(2L,"选出你心目中最好的输入法","5","4"));
list.add(new GridNode(3L,"选出你心目中最好的浏览器","5","11"));
list.add(new GridNode(4L,"选出你心目中最好的杀毒软件","6","4"));
list.add(new GridNode(5L,"选出你心目中最好的社交软件","3","14"));
list.add(new GridNode(6L,"选出你心目中最好的聊天工具","3","2"));
list.add(new GridNode(7L,"选出你心目中最好的翻译软件","5","0"));
list.add(new GridNode(8L,"选出你心目中最好的播放器","2","23"));
list.add(new GridNode(9L,"选出你心目中最好的免费软件","4","7"));
list.add(new GridNode(10L,"选出你心目中最好的录音软件","4","18"));
list.add(new GridNode(11L,"选出你心目中最好的刷机软件","5","6"));

//获取客户端传递的分页参数 默认参数rows表示每页显示记录条数， 默认参数page表示当前页数
Integer pageSize = Integer.parseInt(request.getParameter("rows"));
Integer pageNumber = Integer.parseInt(request.getParameter("page"));
StringBuilder builder = new StringBuilder("{\"total\":"+list.size()+",\"rows\":[");
int start = (pageNumber-1) * pageSize;//计算开始记录数
int end = start+pageSize;//计算结束记录数
for(int i=start;i<end && i<list.size();i++){
GridNode gn = list.get(i);
builder.append("{\"id\":\""+gn.getId()+"\",\"title\":\""+gn.getTitle()+"\",\"options\":"+gn.getOptions()+",\"participants\":"+gn.getParticipants()+"},");
}
String gridJSON = builder.toString();
if(gridJSON.endsWith(",")){
gridJSON = gridJSON.substring(0,gridJSON.lastIndexOf(","));
}

out.print(gridJSON+"]}");
%>
复制代码
 
 
 
 

easy_UI

 

引入js/css样式

<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/css/demo.css">
    <script src="<%=path%>/js/jquery-1.8.3.js"></script>
    <!--jquery.easyui.min.js包含了easyUI中的所有插件-->
    <script src="<%=path%>/js/jquery.easyui.min.js"></script>

编写script

复制代码
<script>
        $(function(){
            $('#tree').tree({
                url:'basic_tree_data.json',        //远程加载tree数据的url路径
                animate:true,                 //是否开启动画效果
                checkbox:true,                 //是否显示复选框
                cascadeCheck:false,         //是否开启级联选中，checkbox属性为true时才生效
                onlyLeafCheck:true,         //是否只在叶节点前显示复选框，checkbox属性为true时才生效
                dnd:true,                     //是否启用拖拽功能
                onDblClick:function(node){     //鼠标双击事件
                    $(this).tree("toggle",node.target); //改变当前节点状态
                }
            });
        });
    </script>
复制代码

编写body

<body>
    <h2>easy UI Tree</h2>
    <ul id="tree"></ul>
</body>

编写basic_tree_data.json

复制代码
[{
    "id":1,
    "text":"功能菜单",
    "children":[{
        "id":11,
        "text":"投票管理",
        "children":[{
            "id":111,
            "text":"所有投票",
            "attributes":{
                "url":"findAll"
            },
            "iconCls":"icon-search"
        },{
            "id":112,
            "text":"发起投票",
            "iconCls":"icon-add"
        }]
    },
    {
        "id":12,
        "text":"用户管理",
        "state":"open",
        "children":[{
            "id":121,
            "text":"个人信息"
        },{
            "id":122,
            "text":"参与投票记录",
            "iconCls":"icon-search"
        },{
            "id":123,
            "text":"发起投票记录",
            "iconCls":"icon-search"
        }]
    },{
        "id":13,
        "text":"系统管理",
        "state":"open",
        "children":[{
            "id":131,
            "text":"系统日志"
        },{
            "id":132,
            "text":"数据字典"
        }]
    }]
}]
复制代码

实现效果

 

 
 
 
 
 
 

Jquery-UI使用

 

=创建form对话框弹出登录

首先引入css样式和js。

 css/js

接下来编写script(finction函数)

 script

接下来编写<body>标签里的内容

 body

实现效果

页面加载时,存放输入文本框的div元素是不能显示的所以在为其添加的dialog方法中需要将autoOpen参数设置为 fslse 。当单击按钮时触发事件，通过执行$( "#dialog-form" ).dialog("open")将div元素显示出来

dialog插件

 

查询自动完成效果

添加css样式/js

 css/js

 

接下来编写script

 script

 

 接下来编写<body>标签里的内容

 body

实现效果(在此显示的数据是数据库里的)

 图片延迟加载

引入js

 js

编写script

 script

 

编写<body> 

 body

 

 

 实现效果就不在此展示了

lazyload插件

 
posted @ 2016-10-17 17:00  方圆i  阅读(120)  评论(0)  编辑  收藏  举报