查询界面
时间:2019-10-08
本文章向大家介绍查询界面,主要包括查询界面使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<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>
原文地址:https://www.cnblogs.com/xiaowoniulx/p/11635709.html
- Case When ELSE END语句
- oracle 表空间tablespace
- Oracle Schema
- Oracle 索引
- Oracle dbms_random随机函数包
- volatile和Synchronized区别
- Oracle 快速插入1000万条数据的实现方式
- HashMap实现原理分析
- Oracle TM锁和TX锁
- Oracle给Select结果集加锁,Skip Locked(跳过加锁行获得可以加锁的结果集)
- select for update和select for update wait和select for update nowait的区别
- Android入门之动画
- Java 读写大文本文件
- 高级聚类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 并查集算法 详解
- SQL 中 EXISTS 用法详解
- Blazor带我重玩前端(六)
- PB 级大规模 Elasticsearch 集群运维与调优实践
- MySQL实时在线备份恢复方案
- Android通过原生请求直接获取网页内容
- matplotlib | Python强大的作图工具,让你从此驾驭图表(二)
- 设计模式 | Catalog设计模式,抵御业务方需求变动
- 【Flutter 专题】99 初识 EventBus
- LeetCode 102 | 将二叉树中同层的元素归并在一起
- Git | Git入门,成为项目管理大师(二)
- 学习|Unity3D使用协程实现减速停车效果
- R语言实现文献的批处理
- django-haystack ImportError: cannot import name 'six' from 'django.utils' in django 3.x
- Thanos 与 VictoriaMetrics,谁才是打造大型 Prometheus 监控系统的王者?