查询界面

Posted xiaowoniulx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了查询界面相关的知识,希望对你有一定的参考价值。

<div id="pdfInfosSelectQueryDiv" class="horizon-list">
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">登记证明编号</span> 
        <input type="text" id="registerNumber" name="registerNumber" class="am-form-field" 
            placeholder="模糊查询,登记证明编号" maxlength="255" />
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">供应商名称</span> 
        <input type="text" id="suppliersName" name="suppliersName" class="am-form-field" 
            placeholder="精确查询,供应商名称" maxlength="255" />
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">财产描述</span> 
        <input type="text" id="propertyDescription" name="propertyDescription" class="am-form-field" 
            placeholder="模糊查询,财产描述" maxlength="5000" />
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">是否过期</span> 
        <select id="isOverdue" name="isOverdue" data-am-selected>
            <option value="" selected>请选择</option>
            <option value="0"></option>
            <option value="1"></option>
        </select>
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">是否标记</span> 
        <select id="isMark" name="isMark" data-am-selected>
            <option value="" selected>请选择</option>
            <option value="1"></option>
            <option value="0"></option>
        </select>
    </div>
    <div class="am-input-group am-input-group-lg" id="markReasonDiv" style="display:none;" >
        <span class="am-input-group-label">标记原因</span> 
        <select id="markReason" name="markReason" multiple data-am-selected="maxHeight: 100,searchBox: 1">
        <option value="" >请选择</option>
        </select>
    </div>
    <div class="am-input-group am-input-group-lg" id="tradingTypeDiv" >
        <span class="am-input-group-label">交易类型</span> 
        <select id="tradingType" name="tradingType"   data-am-selected>
        <option value="" >请选择</option>
        </select>
    </div>
    
    <button type="button" id="pdfInfosSelectQueryBtn" class="am-btn am-btn-primary">查询</button>
</div>

<div class="am-g am-cf am-padding">
    <div class="c-dt-title am-fl">
        <span>PDF信息列表</span>
    </div>
</div>

<div id="pdfInfos_admin_wrapper" class="dataTables_wrapper am-datatable am-form-inline dt-amazeui">
    <div class="am-g">
        <div class="am-u-sm-12 am-scrollable-horizontal">
            <table id="pdfInfos_table_dt" class="am-table am-table-striped am-table-bordered am-table-compact dataTable"
                role="grid" aria-describedby="pdfInfos_table_dt">
                <thead>
                    <tr role="row">
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">标记</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">登记证明编号</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">供应商名称</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">财产描述</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">登记时间</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">登记期限</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">到期日</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1" width="10%">标记原因</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">交易类型</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 每个模块都应该提供一个init方法用来进行事件注册什么的
    function oldPdfInfoAdmin() 
    // 定义一个类(函数)
    // 为该类(函数)添加一个静态方法extend
    oldPdfInfoAdmin.extend = function(obj) 
        for ( var a in obj)
            this[a] = obj[a];// 注意:这里的this即oldPdfInfoAdmin
    
    oldPdfInfoAdmin.title = "中登信息查询";
    oldPdfInfoAdmin.dt = null;
    oldPdfInfoAdmin.extend(
        init : function() 
            
            // 初始化标记原因下拉列表
            var markReasonList = getDictInfo("mark_reason");
            // 显示到指定区域
            var markReasonName = $("#pdfInfosSelectQueryDiv").find("#markReason");
            if (markReasonList)
                $.each(markReasonList,function(index,obj)
                    var html="<option value=‘"+index+"‘ selected >"+obj+"</option>";
                    markReasonName.append(html);
                );
            
            
            //交易类型 trading_type
            var tradingTypeList = getDictInfo("trading_type");
            // 显示到指定区域
            var tradingTypeName = $("#pdfInfosSelectQueryDiv").find("#tradingType");
            if (tradingTypeList)
                $.each(tradingTypeList,function(index,obj)
                    var html="<option value=‘"+obj+"‘ >"+obj+"</option>";
                    tradingTypeName.append(html);
                );
            
            
            // PDF信息列表
            var column = autoBuildDtColumns(["mark", "registerNumber", "grantorPledgorName", "propertyDescription", "registerTime", "regesterDeadline", "regesterDueDate",
                                            "_markReasonDisplay","tradeType"]);
            
            var dtConfigs = 
                "columns" : column,
                "ordering" : false,
                "columnDefs" : [
                    
                     "targets" : [ 0 ],
                     "render" : function(data, type, full) 
                         if(isNotBlank(full.uuid)) 
                             // 标记按钮
                             var markBtn = "<button class=‘am-btn am-btn-default am-btn-xs am-text-secondary mark-btn‘ style=‘margin-left: 5px;margin-right: 5px;‘>" +
                              "<span class=‘am-icon-dot-circle-o‘></span> 标记</button>";
                              // 取消标记按钮
                              var cancelMarkBtn = "<button class=‘am-btn am-btn-default am-btn-xs am-text-secondary cancel-mark-btn‘ style=‘margin-left: 5px;margin-right: 5px;‘>" +
                              "<span class=‘am-icon-circle-o‘></span> 取消标记</button>";
                              // 根据mark的值初始化不同按钮
                              if (full.mark == "1" || full.mark == 1) 
                                  return cancelMarkBtn;
                               else 
                                 return markBtn;
                              
                         
                    ,
                    
                     "targets" : [ 4 ],
                     "render" : function(data, type, full) 
                         return isNotBlank(full.registerTime) ? str2Date(full.registerTime, true) : "";
                    ,
                    
                     "targets" : [ 6 ],
                     "render" : function(data, type, full) 
                         return isNotBlank(full.regesterDueDate) ? str2Date(full.regesterDueDate, false) : "";
                    
                ]
            ;
            
            // draw.dt事件
            var pdfInfos_table_dt = $("#pdfInfos_table_dt").on("draw.dt", function() 
                $("#pdfInfos_table_dt tr:gt(0)").each(function() 
                    // 获取当前行的data
                    var rowIdx = $(this).prop(_DT_RowIndex);
                    if (isNotNull(rowIdx)) 
                        var rowData = getDtRowInfo(oldPdfInfoAdmin.dt, null, rowIdx);
                        // 取得当前行标记的值
                        var markStr = rowData[0].data.mark;
                        // 标记mark值为1时,行添加特殊颜色
                        if (markStr == "1") 
                            colorChange(markStr, $(this));
                        
                    
                );
            );
            
            // PDF信息列表数据绑定
            oldPdfInfoAdmin.dt = dtInit("#pdfInfos_table_dt", "/app/bl/pdfinfos/getpdfinfos/", 
                null, dtConfigs, true, oldPdfInfoAdmin.getQueryPara);
            
            // 注册【查询】点击事件
            $("#pdfInfosSelectQueryDiv").find("#pdfInfosSelectQueryBtn").on("click", function() 
                  oldPdfInfoAdmin.dt.draw();
              );
            
            // 注册【标记】点击事件
            $("#pdfInfos_table_dt tbody").on("click", ".mark-btn", function() 
                var rowIdx = $(this).parents("tr").prop(_DT_RowIndex);
                var rowData = getDtRowInfo(oldPdfInfoAdmin.dt, null, rowIdx);
                if (isNotNull(rowData) && rowData.length > 0) 
                    openModal("app/bl/oldPdfInfos-edit",
                            "oldPdfInfosEditAdmin","请选择标记原因",
                             "uuid" : rowData[0].data.uuid,
                             false,null,null,
                             null,"comfirBtnName" : "确定",null,null,"width" : "500px");
                
            );
            
            // 注册【取消标记】点击事件
            $("#pdfInfos_table_dt tbody").on("click", ".cancel-mark-btn", function() 
                var rowIdx = $(this).parents("tr").prop(_DT_RowIndex);
                var rowData = getDtRowInfo(oldPdfInfoAdmin.dt, null, rowIdx);
                if (isNotNull(rowData) && rowData.length > 0) 
                    ajax_jsonp("/app/bl/pdfinfos/updatecancelmark/", "uuid" : rowData[0].data.uuid, function() 
                        oldPdfInfoAdmin.dt.draw(false);
                    , null, "PUT");
                
            );
            
            // 是否标记下拉框,控制标记原因的显影
             $("#isMark").on("change",function()
                var qhyfAccountUuidText =  $("#isMark").find("option:selected").val();
                if (qhyfAccountUuidText == "1") 
                    $("#markReasonDiv").css("display", "block");
                else 
                    $("#markReasonDiv").css("display", "none");
                
            );
            
            
        ,// init end
        getQueryPara : function() 
            var $queryDiv = $("#pdfInfosSelectQueryDiv");
             var select = $("#markReason");
            var markReason = "";
            for(i=0;i<select[0].length;i++)
                if(select[0][i].selected)
                    if(markReason.length != 0) 
                        markReason += ",";
                    
                    markReason += select[0][i].value;
                
                
            
            // 获取查询条件的值
            return 
                "registerNumber" : $.trim($queryDiv.find("#registerNumber").val()),
                "suppliersName" : $.trim($queryDiv.find("#suppliersName").val()),
                "propertyDescription" : $.trim($queryDiv.find("#propertyDescription").val()),
                "isOverdue" : $queryDiv.find("#isOverdue").val(),
                "isMark": $queryDiv.find("#isMark").val(),
                "markReason" : markReason,
                "tradingType" : $queryDiv.find("#tradingType").val()
            
        //getQueryPara() END
    );//oldPdfInfoAdmin.extend  END
</script>

技术图片

 

以上是关于查询界面的主要内容,如果未能解决你的问题,请参考以下文章

如何用java编写图形化显示sql查询结果

观众查询界面

查询工具左侧界面

查询界面

java怎么将查询到的数据库的内容显示到java图形界面上?

分析 API/查询资源管理器和界面之间的巨大差异