码迷,mamicode.com
首页 > 其他好文 > 详细

金甲防线服务项目笔记:list页面展示与交互设计

时间:2017-09-07 21:22:04      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:err   列表   uil   get   ber   idt   mem   exception   exce   

1、前台页面:

技术分享

因为要展示正版和非正版,所以传个Type值过去:

  //正版序列号库列表
    var type = $("input[name=‘serialNumber‘]:checked").val();
    $("#inside_tableElement").datagrid({
        striped : true,
        collapsible : true,
        url : "${basePath}/genuineSerialNumberManagementAction_list.do",
        queryParams:{
            "genuineSerialNumberManagement.type":type
        },
        columns : [ [ 
            {field : softDisplayName,title : 软件名,align : center,width : (datag_width * 0.44)}, 
            {field : version,title : 版本号,align : center,width : (datag_width * 0.44)}, 
            {field : serialNumber,title : 序列号,align : center,width : (datag_width * 0.44)}
        ] ],
        fitColumns : true,
        rownumbers : true,
        pagination:true,
        pageSize: 20,
        pageList: [20, 50, 100],
        onSelectAll : function() {
        },
        onUnselectAll : function() {
        },
        onSelect : function() {
        },
        onUnselect : function(rowIndex, rowData) {
        }
    });

 后台list方法:

public void list(){
    GridData<GenuineSerialNumberManagement> genuineSerialNumberManagements = null;
    try {
        HQLBuilderUtil builderUtil = new HQLBuilderUtil(GenuineSerialNumberManagement.class);
        builderUtil.addOrderByProperty(" this.id ", true);
        if(genuineSerialNumberManagement.getType() != null){
            int type = genuineSerialNumberManagement.getType();
            builderUtil.addWhereClause(" this.type=? ", type);//增加查询属性type
        }
        //当有SoftDisplayName传过来时,还要增加查询属性SoftDisplayName
        if(genuineSerialNumberManagement.getSoftDisplayName() != null && !"".equals(genuineSerialNumberManagement.getSoftDisplayName())){
            String softDisplayName = genuineSerialNumberManagement.getSoftDisplayName();
            builderUtil.addWhereClause(" this.softDisplayName=? ", softDisplayName);
        }
        System.out.println(builderUtil.toQueryListHql());
        genuineSerialNumberManagements = genuineSerialNumberManagementService.getPageView(builderUtil, getPageNum(), getPageSize());
    } catch (Exception e) {
        log.error("正版序列号管理列表获取失败!", e);
    }finally{
        print(ActionUtil.jsonObj(genuineSerialNumberManagements));
    }
}

我们可以看下HQLBuilderUtil 工具类里面的addWhereClause:注意需要加 =? 来与参数对应

   /**
     * 添加过滤条件,组织WHERE语句(可变参数附条件)
     * @param condition 过滤的条件
     * @param params 参数列表
     * @return 工具类本身
     */
    public HQLBuilderUtil addWhereClause(String condition, Object... params){
        //1.组织语句
        if(StringUtils.isBlank(whereClause)){
            whereClause = " WHERE " + condition;
        }else{
            whereClause += " AND " + condition;
        }
        //2.添加参数
        if(params != null && params.length>0){
            for (Object param : params) {
                paramList.add(param);
            }
        }
        return this;
    }

2、接着,我们看点击左右软件名字,与右侧展示数据的交互

技术分享

  //左边菜单栏切换
    function changeMenu(obj){
        $(obj).siblings().removeClass("selected");
        $(obj).addClass("selected");
        var softDisplayName = $(obj).text(),
            type = $(input[name="serialNumber"]:checked).val();
        if(type === "1"){
            $("#inside_tableElement").datagrid(load,{
                "genuineSerialNumberManagement.type":type,
                "genuineSerialNumberManagement.softDisplayName":softDisplayName
            })
        }else{
            $("#inside_tableElement_no").datagrid(load,{
                "genuineSerialNumberManagement.type":type,
                "genuineSerialNumberManagement.softDisplayName":softDisplayName
            })
        }
    }

也就是上面的list方法,传入了softDisplayName的查询属性。

3、接着,正版和非正版之间切换:注意$("#inside_tableElement_no")需要这样初始化表格之后,才能再像正版那样使用  load  传入参数重新加载

  //正版与非正版之间切换
    $("#genuineSerialNumber").click(function(){
        $("#tableName").text("正版序列号库:");
        $("#center1").css(display,block);
        $("#center2").css(display,none);
        var type = $("#genuineSerialNumber").val();
        var softDisplayName = $("#softNameMenu .selected").text();
        $("#inside_tableElement").datagrid("load",{
            "genuineSerialNumberManagement.type":type,
            "genuineSerialNumberManagement.softDisplayName":softDisplayName
        });
    });
    $("#non_genuineSerialNumber").click(function(){
        $("#tableName").text("非正版序列号库:");
        $("#center1").css(display,none);
        $("#center2").css(display,block);
        var type = $("#non_genuineSerialNumber").val();
        var softDisplayName = $("#softNameMenu .selected").text();
        $("#inside_tableElement_no").datagrid({
            striped : true,
            collapsible : true,
            url : "${basePath}/genuineSerialNumberManagementAction_list.do",
            queryParams:{
                "genuineSerialNumberManagement.type":type,
                "genuineSerialNumberManagement.softDisplayName":softDisplayName
            },
            columns : [ [ 
                {field : softDisplayName,title : 软件名,align : center,width : (datag_width * 0.44)}, 
                {field : version,title : 版本号,align : center,width : (datag_width * 0.44)}, 
                {field : serialNumber,title : 序列号,align : center,width : (datag_width * 0.44)}
            ] ],
            fitColumns : true,
            rownumbers : true,
            pagination:true,
            pageSize: 20,
            pageList: [20, 50, 100]
        });
    });

 4、struts的s:iterator标签循环遍历:

左侧的软件名称是通过struts遍历数据的值来展示,通过下面方式。

后台需要设置list到前台来:

public String listUI(){
        List<GenuineSerialNumberManagement> genuineSerialNumberManagements = genuineSerialNumberManagementService.queryAll();
        List<GenuineSerialNumberManagement> genuineSerialNumberManagementList = new ArrayList<GenuineSerialNumberManagement>();
        if(genuineSerialNumberManagements != null){
            for(GenuineSerialNumberManagement gsnm : genuineSerialNumberManagements){
                GenuineSerialNumberManagement gm = new GenuineSerialNumberManagement();
                gm.setSoftDisplayName(gsnm.getSoftDisplayName());
                genuineSerialNumberManagementList.add(gm);
            }
        }
        getRequest().setAttribute("genuineSerialNumberManagementList", genuineSerialNumberManagementList);
        return RETURN_LISTUI;
    }

前台通过下面方式获取遍历:

<div id="softNameMenuContent">
   <s:if test="#request.genuineSerialNumberManagementList != null">
   <s:iterator  value="#request.genuineSerialNumberManagementList">
       <a class="softName" onclick="changeMenu(this);"><span><s:property value="#request.softDisplayName" /></span></a>
   </s:iterator>
   </s:if>
</div>

 

金甲防线服务项目笔记:list页面展示与交互设计

标签:err   列表   uil   get   ber   idt   mem   exception   exce   

原文地址:http://www.cnblogs.com/goloving/p/7491669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!