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

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>