第一次写jquery组件

/**
 * @author LiCheng
 * 
 *  功能:该插件用于点击input,弹出子窗口,并自动创建隐藏的input,将子窗口的返回值赋值到父窗口
 *  
 *  使用:
 *  1.在使用页面导入comm_openWin.css
 *  2.在使用页面导入comm_openWin.js
 *  3.在需要弹出框的input上指定对应class,并添加fname,fvalue属性,加入singleSelect属性,值随意填,则为单选,多选则不用加singleSelect属性.
 *  4.回调函数changeCallback
 * 
 */
;(function($,window,document,undefined){
    // 定义OpenTabWin的构造函数
    var OpenTabWin = function(opt){
        this.defaults = {
                'width':'500px',
                'height':'550px',
                classTwin : {
                    'deptTabWin' : 'comm.do?method=forwardPage&pg=comm/departmentTableWin',
                    'userTabWin' : 'comm.do?method=forwardPage&pg=comm/userTableWin',
                    'comparisonTabWin' : 'tcomparison.do?method=forwardComparisonPage&pg='+encodeURI('traffic/talarmcomparisontypewin') 
                },
                changeCallback:function(target,returnVal){}
        },
        this.options = $.extend({}, this.defaults, opt);
    };

    //  绑定click事件
    OpenTabWin.prototype = {
            openWin:function(){
                var opt = this.options;
                var width = opt.width;
                var height = opt.height;
                var jsonObj = opt.classTwin;
                for(var item in jsonObj){
                    $('.'+item).unbind('click').bind('click',function(event){
                        var target = event.target;
                        var returnVal ;
                        var classNames = $(this).attr('class');
                        var selectedShowVals = $(this).attr('value');
                        var fid = 'com_sunshine_jcbk_myotwPlugin_' + $(this).attr('fname');
                        var selectedHideVals = $('#'+fid).attr('value');
                        var singleSelect = $(this).attr('singleSelect');
                        if(singleSelect){
                            singleSelect = true;
                        }else {
                            singleSelect = false;
                        }
                        var classNameAgrs = classNames.split(' ');
                        var urlPage = '';
                        for(var i=0;i<classNameAgrs.length;i++){
                            var className = classNameAgrs[i];
                            if(opt.classTwin[className]) urlPage = eval('opt.classTwin.'+className);
                        }
                        if(urlPage == null || typeof(urlPage)=='undefined'||urlPage==''){
                            return ;
                        }else if(selectedShowVals != null && typeof(selectedShowVals)!='undefined' && selectedShowVals != ""){
                            urlPage += '&selectedShowVals='+encodeURI(encodeURI(selectedShowVals))
                                +'&selectedHideVals='+encodeURI(encodeURI(selectedHideVals));
                        }
                        returnVal = openTabWin($(this), width, height,urlPage, singleSelect);
                        opt.changeCallback(target,returnVal);
                    });
                }
            }
    };
    
    // 定义创建隐藏input的方法
    function createHideInput(jsonObj){
        for(var item in jsonObj){
            $('.'+item).each(function(){
                var fname = $(this).attr('fname');
                var fid = 'com_sunshine_jcbk_myotwPlugin_'+fname;
                var fvalue = $(this).attr('fvalue');
                $(this).addClass('icon-win');
                $(this).after('<input type="hidden" name="'+fname+'" id="'+fid+'" value="'+fvalue+'">');
            });
        }
    }
    
    // 定义弹出窗的方法
    function openTabWin(ele, width, height,urlPage,singleSelect){
        var $element = ele;
        var obj = new Object();
        obj.singleSelect = singleSelect;
        // onclick监听事件
        //urlPage
        str = window.showModalDialog(urlPage,obj,'dialogWidth='+width+';dialogHeight='+height);
        // 回调函数创建隐藏域并并赋值
        var fname = $element.attr('fname');
        var fid = 'com_sunshine_jcbk_myotwPlugin_'+fname;
        var showVals = (str==null || typeof(str)=='undefined')?'':str.showVals;
        var hideVals = (str==null || typeof(str)=='undefined')?'':str.hideVals;
        
        if(showVals && hideVals){
            $element.val(showVals);
            $('#'+fid).val(hideVals);
        }
        
        return str;
    }

    // 在插件中使用OpenTabWin对象
    $.fn.myotwPlugin = function(options){
        // 创建OpenTabWin的实体
        var openTabWin = new OpenTabWin(options);
        // 创建隐藏input
        createHideInput(openTabWin.options.classTwin);
        // 添加窗口监听事件
        openTabWin.openWin();
        return;
    }
})(jQuery, window, document);

子窗口中的js,使用了easyui

<script type="text/javascript">
	var obj = window.dialogArguments;
	var selectedShowVals = [];
	var selectedHideVals = [];
	var selectRows = []; 
	var returnJson = ""; // 返回到父窗口的json
	<c:forEach var="showVal" items="${selectedShowVals}">
		var show_value = '<c:out value="${showVal}"/>';
		selectedShowVals.push(show_value);
	</c:forEach>
	<c:forEach var="hide_value" items="${selectedHideVals}">
		var hide_value = '<c:out value="${hide_value}"/>';
		selectedHideVals.push(hide_value);
	</c:forEach>
	
	$(function() {
		$('#userTab').datagrid({
			idField : 'YHDH',
			url : 'sysUserCtrl.do?method=queryList&dwdm=${glbm}',
			title : '人员展示',
			width : 470,
			//height: 500,
			fitColumns : true,
			nowrap : false,
			rownumbers : false,
			striped : true,
			singleSelect : obj.singleSelect,
			pagination : true,
			columns : [ [ {
				field : 'YHDH',
				title : '用户名',
				width : 50,
				align : 'center'
			}, {
				field : 'YHMC',
				title : '姓名',
				width : 100,
				align : 'left'
			} ] ],
			onSelect: function(rowIndex, rowData) {
				if(obj.singleSelect){
					selectedShowVals = [];
					selectedHideVals = [];
					selectedShowVals=rowData.YHMC;
					selectedHideVals=rowData.YHDH;
				}else{
					if($.inArray(rowData.YHDH, selectedHideVals) == -1){
						selectedShowVals.push(rowData.YHMC);
						selectedHideVals.push(rowData.YHDH);
					}
				}
				setInput();
			},
			onUnselect: function(rowIndex, rowData) {
				var showIndex = $.inArray(rowData.YHMC, selectedShowVals);
				var hideIndex = $.inArray(rowData.YHDH, selectedHideVals);
				selectedShowVals.splice(showIndex,1);
				selectedHideVals.splice(hideIndex,1);
				setInput();
			},
 			onLoadSuccess:function(data){
				initInput();
			} 
		});
	});
	
	// init
	function initInput(){
		var rows = $('#userTab').datagrid('getRows');
		 for(var i=0; i<rows.length; i++){
			for(var j=0; j<selectedHideVals.length; j++){
				if(selectedHideVals[j]==rows[i].YHDH){
					$('#userTab').datagrid('selectRow',i);
				}
			}
		} 
		setInput();
	}  

	//查询
	function dosearch() {
		showTable();
	}

	function showTable() {
		var _yhdh = $("#yhdh_v").val();
		var _yhmc = $("#yhmc_v").val();

		$('#userTab').datagrid('options').url = 'sysUserCtrl.do?method=queryList&dwdm=${glbm}';
		// 获取查询参数对象
		var queryParams = $('#userTab').datagrid('options').queryParams;
		queryParams.yhdh = _yhdh;
		queryParams.yhmc = _yhmc;

		$('#userTab').datagrid('options').queryParams = queryParams;
		$('#userTab').datagrid('load');

	}

	// 清除
	function doclear() {
		returnJson = {
				"showVals" : " ",
				"hideVals" : " "
			};
		window.returnValue = returnJson;
		window.close();
	}

	function dosubmit() {
		if ($("#yhdh").val().length < 1) {
			alert("您没有选择任何人员！");
			return false;
		}

		closeWin();
	}

	// 关闭弹出框并发回选中的对象
	function closeWin() {
		window.returnValue = returnJson;
		window.close();
	}

	function setInput() {
		$('#yhmc').val(selectedShowVals);
		$('#yhdh').val(selectedHideVals);

		returnJson = {
			"showVals" : selectedShowVals,
			"hideVals" : selectedHideVals
		};
	}
	var p = 0;
</script>