F7选择对话框的实现

最新推荐文章于 2023-02-07 11:20:12 发布

fenyu8

最新推荐文章于 2023-02-07 11:20:12 发布

阅读量1.7k

点赞数

分类专栏：公司平台学习 java Web

本文链接：https://blog.csdn.net/fenyu8/article/details/60138964

版权

公司平台学习同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

java Web

12 篇文章 1 订阅

订阅专栏

1.实现效果图

2.程序入口

界面控件：

					<input name="VESSEL_CD" type="text" id="VESSEL_CD" value="<%=oFile.getVESSEL_CD()%>" class="text_readonly" readonly="readonly" style="display: none;"/>
					<input name="VESSEL_NM" type="text" id="VESSEL_NM" value="<%=oFile.getVESSEL_NM()%>" class="text_readonly" readonly="readonly" style="width:67%;"/>
					<img id="VESSEL_CD_img"  src="<%=request.getContextPath()%>/include/F7Select/search.gif"  style="cursor: pointer;margin-left:3px; width=20px; height=21px;" οnclick="javascript:VESSEL_CD_F7SelectBox();"></img>
				    <label><font color="red">*</font></label>

参数构造:

		function VESSEL_CD_F7SelectBox()
		{
			var sql = "select FILEID,VESSEL_CD,VESSEL_EN_NM,VESSEL_CN_NM,SHORT_NM,OTHER_NM,FINANCIAL_CODE,BUILDER,CONVERT(varchar(100), BUILTDATE, 23) BUILTDATE,HULLNO,CONVERT(varchar(100), RECEIVE_TM, 23) RECEIVE_TM from SH_BASE_VESSEL_GENERAL"
		  	var pkColName = "FILEID";
			var colNames = "VESSEL_CD,HULLNO,VESSEL_EN_NM,VESSEL_CN_NM,SHORT_NM,OTHER_NM,FINANCIAL_CODE,RECEIVE_TM";
		  	var colTitles = "船舶编号,船体编号,英文名称,中文名称,简称,曾用名,财务编码,接收时间";
			var likeFields = "VESSEL_CD,HULLNO,VESSEL_EN_NM,VESSEL_CN_NM,SHORT_NM,OTHER_NM,FINANCIAL_CODE";
			var retValue = F7SelectDialog(sql,pkColName,colNames,colTitles,likeFields);//打开F7选择对话框,返回选择对象
			if(retValue!="" && retValue!=undefined)
			{
				var retValue = eval(retValue);
				var VESSEL_CD = retValue[0].VESSEL_CD;
				var VESSEL_EN_NM = retValue[0].VESSEL_EN_NM;
				$("#VESSEL_CD").val(VESSEL_CD);
				$("#VESSEL_NM").val(VESSEL_EN_NM);
			}
		}

调用函数:

		function F7SelectDialog(sql,pkColName,colNames,colTitles,likeFields)
		{
			var sql = encodeURIComponent(sql);
			var pkColName = encodeURIComponent(pkColName);
			var colNames = encodeURIComponent(colNames);
			var colTitles = encodeURIComponent(colTitles);
			var likeFields = encodeURIComponent(likeFields);
			var url = "<%=request.getContextPath()%>/scripts/common/f7Select/F7SelectList.jsp?"
					+ "sql="+sql+"&colNames="+colNames+"&colTitles="+colTitles+"&pkColName="+pkColName+"&likeFields="+likeFields+"&r="+new Date().getTime();
			var dialogWidth = 850;
			var dialogHeight = 700;
			var bleft = (window.screen.width - dialogWidth) / 2;
 			var btop = (window.screen.height - dialogHeight) / 2;
			var retValue = window.showModalDialog(url,document,'dialogWidth:'+dialogWidth+'px;dialogHeight:'+dialogHeight+'px;dialogLeft:'+bleft+'px;dialogTop:'+btop+'px;scroll:no;');
			return retValue;
		}

3.数据列表界面F7SelectList.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="com.costech.common.helper.AuthHelper" %>
<%@page import="com.costech.common.util.StringUtility" %>
<%@page import="com.costech.common.constants.CommonConstants"%>
<%@page import="com.costech.common.service.ICommonService"%>
<%@page import="com.costech.common.helper.ServiceHelper"%>
<%@page import="com.costech.common.bean.Attachment" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	ICommonService	gd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);
	//获取参数值
	String sql = StringUtility.toStringValue(request.getParameter("sql"),"");
	sql = new String(sql.getBytes("iso8859-1"),"UTF-8");//解决中文乱码和特殊字符的问题
  	String pkColName = StringUtility.toStringValue(request.getParameter("pkColName"),"");
  	String colNames = StringUtility.toStringValue(request.getParameter("colNames"),"");
	String colTitles = StringUtility.toStringValue(request.getParameter("colTitles"),"");
	colTitles = new String(colTitles.getBytes("iso8859-1"),"UTF-8");
	String likeFields = StringUtility.toStringValue(request.getParameter("likeFields"),"");
	likeFields = new String(likeFields.getBytes("iso8859-1"),"UTF-8");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>F7选择对话框</title>
    <base target="_self">
    <script src='<%=request.getContextPath() %>/include/jquery-1.11.1.min.js'></script>
	<SCRIPT language=JavaScript src="<%=request.getContextPath()%>/include/list.js"></SCRIPT>
	<SCRIPT language=JavaScript src="F7SelectList.js"></SCRIPT>
    <style type="text/css">
    	body{background-color:#F2FAFF;}
		table{border-right:1px solid #B2CCE5;border-bottom:1px solid #B2CCE5;font-size: 12px;table-layout:fixed;} 
		table th{background-color:#E0EAF7; border-left:1px solid #B2CCE5;border-top:1px solid #B2CCE5;color:#01245E;}
		table td{border-left:1px solid #B2CCE5;border-top:1px solid #B2CCE5;overflow:hidden;text-overflow:ellipsis;}
		.text_input{
		    font-size:12px;
		    font-family: Arial,verdana;
		    height: 20px;
			color:#000000;
			padding-top:3px;
		    background-color:#FFFFFF;
			border: 1 solid #7898c8;
		}
    </style>
    
	<script type="text/JavaScript">
		//文档加载完成函数,把参数值传递给js保存
		$(document).ready(function(){
			init("<%=path%>","<%=sql%>","<%=pkColName%>","<%=colNames%>","<%=colTitles%>","<%=likeFields%>");
		});
	</script>
    
  </head>
  
  <body>
  	<div style="width: 100%;height: 25px;background-color: #E0EAF7;">
  		<div style="width:30%;float:left;margin-left:1px; margin-top: 3px;">
			<input id="likeWord" type="text" style="width: 70%;" class="text_input"/>
	  		<button type="button" style="width: 20%;valign: middle;cursor: hand;background-color: transparent; border: 0;"
					οnclick="query_click()" οnmοuseοver="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'">
					<img src="<%=request.getContextPath() %>/image/common/search.gif" width="15" height="15" align="absbottom">查询
			</button>
  		</div>
		<div style="float: right;font-size: 12px;margin-top: 10px;margin-right: 3px;color: #01245E;">
			共<label id="total"></label>条记录 共<label id="totalPage"></label>页 第<label id="pageNumber"></label>页
			<a style="cursor: hand;" οnclick="firstPage()">首页</a>
			<a style="cursor: hand;" οnclick="previousPage()">上一页</a>
			<a style="cursor: hand;" οnclick="nextPage()">下一页</a>
			<a style="cursor: hand;" οnclick="lastPage()">尾页</a>
		</div>
  	</div>
  	<div id="dataList" style="height: 90%;OVERFLOW-Y: auto;border: 3px solid #B2CCE5;"></div>
  	<div style="width: 100%;height: 100%;background-color: #E0EAF7;text-align:center;">
  		<button type="button" style="margin-top:10px;valign: middle;cursor: hand;background-color: transparent;border:1px solid #135FA4;width:80px; height: 22px;"
				οnclick="confirm()" οnmοuseοver="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'">
				 确定 
		</button>
		  
  		<button type="button" style="valign: middle;cursor: hand;background-color: transparent;border:1px solid #135FA4;width:80px;height: 22px;"
				οnclick="cancel()" οnmοuseοver="style.backgroundColor='white'" onMouseOut="style.backgroundColor='#E0EAF7'">
				 取消 
		</button>
  	</div>
   	<a id="reload" href="" style="display:none" style="display: none;">reload</a>
  </body>
</html>

4.列表界面功能实现F7SelectList.js

var path = "";//当前路径
var selectedObjs = new Array();//已选择的行对象
var sql = "";//数据查询sql
var pkColName = "";//主键字段名
var colNames = "";//数据表格显示列字段
var colNamesArr = new Array();//数据表格显示列字段
var colTitles = "";//数据表格显示列标题
var colTitlesArr = new Array();//数据表格显示列标题
var pageSize = 20;//每页显示记录数
var pageNumber = 1;//第几页
var likeFields = "";//支持模糊查询的字段名
var likeWord = "";//模糊查询字
var total = "0";//总记录数
var totalPage = "0";//总页数

/**
 * 初始化
 * @param path 当前路径
 * @param sql 数据查询sql,必须包含主键列pkColName,表格显示列colNames,模糊查询的列likeFields,如"select * from DD_PRODUCT"
 * @param pkColName 主键列,只能是一个字段名,如"FileID"
 * @param colNames 表格显示列,可以多个字段,多个字段用","分隔,如"OrderNo,ProductName,SerialNumber,Number,Price,Total,DeliverysTime,EndTimes,Status,Material,Units"
 * @param colTitles 表格显示列标题,如"订单号,产品名称,序列号,数量,单价,总价,交付时间,结束时间,状态,材料,单位"
 * @param likeFields 支持模糊查询的列,如"OrderNo,ProductName"
 * @returns {init}
 */
function init(path,sql,pkColName,colNames,colTitles,likeFields)
{
	if(isEmpty(sql))
	{
		alert("查询sql语句不能为空");
		return;
	}
	if(isEmpty(pkColName))
	{
		alert("主键字段名不能为空");
		return;
	}
	if(isEmpty(colNames))
	{
		alert("数据表格显示列字段不能为空");
		return;
	}
	if(isEmpty(colTitles))
	{
		alert("数据表格显示列标题不能为空");
		return;
	}
	
	this.path = path;
	this.sql = sql;
	this.pkColName = pkColName;
	this.colNames = colNames;
	this.colTitles = colTitles;
	this.colNamesArr = colNames.split(",");
	this.colTitlesArr = colTitles.split(",");
	this.likeFields = likeFields;
	if(colNamesArr.length!=colTitlesArr.length)
	{
		alert("数据表格显示列标题与字段个数必须一致");
		return;
	}
	queryDataList();
}

/**
 * 点击查询
 */
function query_click()
{
	likeWord = $("#likeWord").val();//模糊查询字
	pageNumber = 1;
	selectedObjs = new Array();
	queryDataList();
}

/**
 * 查询数据并构建数据表格
 */
function queryDataList()
{
	$.ajax({
           cache: true,
           type: "POST",
           dataType:"json",
           url:"F7SelectQuery.jsp",
           data:{sql:sql,pageSize:pageSize,pageNumber:pageNumber,pkColName:pkColName,likeFields:likeFields,likeWord:likeWord},
           async: false,
           error: function(request) {
               alert("error");
           },
           success: function(data) {
               if(data.code==0)
               {
               	  alert(data.msg);
               }else
               {
            	   total = data.total;
            	   totalPage = Math.ceil(total/pageSize);
            	   $("#total").html(total);
            	   $("#totalPage").html(totalPage);
            	   $("#pageNumber").html(pageNumber);
            	   
            	   createTable(data.data);
               }
           }
	    });
}

/**
 * 根据返回的数据构建数据表格
 * @param jsonList
 */
function createTable(jsonList)
{
	$("#dataList").html("");
	var t = '  		<table style="width: 100%;" cellspacing="0" cellpadding="0">'
			  			+'<thead>'
			  				+'<tr style="height:25px;">'
			  					+'<th style="width:35px;text-align: center;">选择</th>'
			  					+'<th style="width:35px;">序号</th>';
	for(var i=0;i<colTitlesArr.length;i++)
	{
		t = t+'<th>'+colTitlesArr[i]+'</th>';
	}
	t = t+'  				</tr>'
			+'  		</thead>'
			  +'		<tbody>';
			  
	
	var dataArr = eval(jsonList);
	for(var i=0;i<dataArr.length;i++){
		var json = eval(dataArr[i]);
		var pkValue = json[pkColName];
		var checked = "";
		$.each(selectedObjs, function(i, o){
			var pk = o[pkColName];
			if(pkValue==pk)
			{
				checked = 'checked="checked"';
			}
		});
		
		t = t+ ' 				<tr οnmοuseοver="style.backgroundColor=\'#B2CCE5\'" οnmοuseοut="style.backgroundColor=\''+(i%2==0?"#FFFFFF":"#ECF6F9")+'\'" style="background-color: '+(i%2==0?"#FFFFFF":"#ECF6F9")+'">    '
				+'  					<td style="text-align: center;" name="pkColName"><input type="checkbox" name=\''+pkColName+'\' value="'+json[pkColName]+'" '+checked+' οnclick="checkbox_onclick(this)"/></td>'
				+'  					<td style="text-align: center;" name="seq">'+(pageSize*(pageNumber-1)+(i+1))+'</td>';
	    for (var j=0;j<colNamesArr.length;j++)
	    {
	    	var colName = colNamesArr[j];
	    	var value = json[colName];
	    	if(value=="null" || value==null)
    		{
	    		value = " ";
    		}
	   		t = t+'<td name="'+colName+'">'+value+'</td>';
	    }
	   	t = t+'</tr>';
	}
	t = t+ ' 			</tbody>'
			 +'		</table>';
			 
	$("#dataList").html(t);
}

/**
 * 首页
 */
function firstPage()
{
	pageNumber = 1;
	queryDataList();
}

/**
 * 上一页
 */
function previousPage()
{
	if(pageNumber<=1)
	{
		alert("已经是第一页");
		return;
	}
	pageNumber = pageNumber-1;
	queryDataList();
}

/**
 * 下一页
 */
function nextPage()
{
	if(pageNumber>=totalPage)
	{
		alert("已经是最后一页");
		return;
	}
	pageNumber = pageNumber+1;
	queryDataList();
}

/**
 * 最后一页
 */
function lastPage()
{
	pageNumber = totalPage;
	queryDataList();
}

/**
 * 确定 返回选择的记录行数据给调用者
 */
function confirm()
{
	if(selectedObjs.length==0)
	{
		alert("请选择记录");
		return;
	}
    window.returnValue = arrayToJson(selectedObjs);  
    window.close();
}

/**
 * 取消
 */
function cancel()
{
    window.returnValue="";  
    window.close();
}

/**
 * 选择/取消选择行记录,把选择中的行记录放到selectedObjs数据中
 * @param obj
 */
function checkbox_onclick(obj)
{
	var isExist = false;
	var p = 0;
	var v = $(obj).val();
	$.each(selectedObjs, function(i, o){
		var pk = o[pkColName];
		if(v==pk)
		{
			isExist = true;
			p = i;
			return false;
		}
	});
	
	if($(obj).is(":checked"))
	{
		if(!isExist)
		{
		  	var row = new Object();
			eval('row.'+pkColName+' = "'+$(obj).val()+'"');
			$.each($(obj).parent().nextAll(), function(i, o){
				var value = $(o).html();
				value = value.replace(/ /ig, "");
	  			eval("row."+$(o).attr("name")+' = "'+value+'"');
			});
			selectedObjs.push(row);
		}
	}else
	{
		if(isExist)
		{
			selectedObjs.splice(p,1);
		}
	}
}

/**
 * 把对象数组转换成JSONArray格式字符串
 * @param o
 * @returns
 */
function arrayToJson(o) {
    var r = [];
    if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    if (typeof o == "object") {
        if (!o.sort) {
            for (var i in o) r.push(i + ":" + arrayToJson(o[i]));
            if ( !! document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}";
        } else {
            for (var i = 0; i < o.length; i++) {
                r.push(arrayToJson(o[i]));
            }
            r = "[" + r.join() + "]";
        }
        return r;
    }
    return o.toString();
}

/**
 * 判断对象是否为空
 * @param o
 * @returns
 */
function isEmpty(o)
{
	return o==null || o==undefined || o.replace(/(^s*)|(s*$)/g, "").length ==0;
}

5.后台sevlet:F7SelectQuery.jsp

<%@page import="java.util.*"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page contentType="text/html;charset=UTF-8" %>
<%@page import="com.costech.common.util.StringUtility"%> 
<%@page import="com.costech.common.helper.BeanDataHelper"%>
<%@page import="com.costech.common.bean.SystemPath"%>
<%@page import="com.costech.common.constants.CommonConstants"%>
<%@page import="com.costech.common.service.ICommonService"%>
<%@page import="com.costech.common.helper.ServiceHelper"%>

<%
	request.setCharacterEncoding("UTF-8");	
    try{
	    ICommonService	gd = (ICommonService)ServiceHelper.getService(CommonConstants.COMMON_SERVICE);
	    //获取参数值
	    String sql = StringUtility.toStringValue(request.getParameter("sql"), "");
	    String pageSize = StringUtility.toStringValue(request.getParameter("pageSize"),"20");
	    String pageNumber = StringUtility.toStringValue(request.getParameter("pageNumber"),"1");
	    String pkColName = StringUtility.toStringValue(request.getParameter("pkColName"),"FileID");
	    String likeFields = StringUtility.toStringValue(request.getParameter("likeFields"),"");
	    String likeWord = StringUtility.toStringValue(request.getParameter("likeWord"),"");
	    
	    if(StringUtility.isEmpty(sql))
	    {
	    	throw new RuntimeException("查询sql语句为空");
	    }
	   	if(StringUtility.isEmpty(pkColName))
	    {
	    	throw new RuntimeException("主键字段名为空");
	    }
	    
	    StringBuffer likeStr = new StringBuffer();
	    if(StringUtility.isNotEmpty(likeWord) && StringUtility.isNotEmpty(likeFields))
		{
			String[] likeFieldsArr =  likeFields.split(",");
			int j = 0;
			for(int i=0;i<likeFieldsArr.length;i++)
			{
				String field = likeFieldsArr[i];
				if(StringUtility.isEmpty(field))
				{
					continue;
				}
				if(j==0)
				{
					likeStr.append("	   WHERE temp."+field+" LIKE '%"+likeWord+"%'	");
				}else
				{
					likeStr.append("	   OR temp."+field+" LIKE '%"+likeWord+"%'	");
				}
				j++;
			}
		}
	    
	    StringBuffer querySql = new StringBuffer();
	    querySql.append("	SELECT TOP "+pageSize+" *	");
		querySql.append("	FROM	");
		querySql.append("	  (SELECT *	");
		querySql.append("	   FROM	");
		querySql.append("	     ("+sql+") TEMP	");
		querySql.append("	  "+likeStr+" ) TEMP	");
		querySql.append("	WHERE temp."+pkColName+" NOT IN	");
		querySql.append("	    (SELECT TOP "+(Integer.valueOf(pageSize)*(Integer.valueOf(pageNumber)-1))+" temp."+pkColName+"	");
		querySql.append("	     FROM	");
		querySql.append("	       (SELECT *	");
		querySql.append("	        FROM	");
		querySql.append("	          ("+sql+") TEMP	");
		querySql.append("	       "+likeStr+" ) TEMP)	");
		
	    List list = gd.getDataList(querySql.toString());
	    String jsonStr = "[]";
	    if(list!=null)
	    {
	    	jsonStr = JSONArray.fromObject(list).toString();
	    }
	    
	    String sqlCount = "select count(*) n from ("+sql+") temp "+likeStr;
	    String n = gd.getNameListBySql(sqlCount, "n", ";");
	   	if(StringUtility.isEmpty(n))
	    {
	    	n = "0";
	    }
		
		JSONObject retJson = new JSONObject();
		retJson.put("code", "1");
		retJson.put("msg", "操作成功");
		retJson.put("data", jsonStr);
		retJson.put("total", n);
		out.write(retJson.toString());
	} catch (Exception e) {
		e.printStackTrace();
		JSONObject retJson = new JSONObject();
		retJson.put("code", "0");
		retJson.put("msg", e.getMessage());
		retJson.put("data", "");
		retJson.put("total", "0");
		out.write(retJson.toString());
	}
%>

fenyu8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
F7选择对话框的实现

1.实现效果图2.程序入口参数构造: var sql = "select FileID,OrderNo,ProductName,SerialNumber,Fomart,Number,Price,Total,CONVERT(varchar(100), DeliverysTime, 20) DeliverysTime,CONVERT(varchar(100), EndTimes
复制链接

扫一扫