[jquery] 查询设计里面的分组，column增加和编辑问题

Julian Wong

unread,

Dec 30, 2010, 10:33:37 PM12/30/10

to ralasa...@googlegroups.com

dear all,

还是刚才那个场景，设计查询分组条件。

假如我要编辑某个分组条件。例如：将原来的t1.column1修改为t2.column2。

我觉得使用方案可以有：

1，弹出页面，该页面有两个下拉框。表选择下拉框，和列选择下拉框。列下拉框与表选择下拉框关联。当选择某个表的时候，列下拉框自动显示该表的列；

2，使用jqgrid自带的弹出窗口进行编辑。

因为，弹出窗口的时候，显示表和列下拉框内容之前，需要从后台读取值。（譬如：select语句里面增加了一个表格t3）。

望各位jquery高手给个方案。

--

Julian Wong

汪金保

Founder and Team Leader

Open Source Access Control Middleware
http://www.ralasafe.org

http://twitter.com/ralasafe

http://t.sina.com.cn/ralasafe

Julian Wong

unread,

Dec 30, 2010, 10:46:31 PM12/30/10

to ralasa...@googlegroups.com

又来了一位哥，顶一下

2010/12/31 Julian Wong <rala...@gmail.com>

chen david

unread,

Dec 31, 2010, 6:26:08 AM12/31/10

to ralasa...@googlegroups.com

不好意思，不是很明白。。。

Julian Wong

unread,

Dec 31, 2010, 9:19:03 PM12/31/10

to ralasa...@googlegroups.com

新年快乐！

OK，情况是这样的。

比如现在group条件是：group by t1.column1, t2.column2

我点击add 按钮，新增一个条件比如t1.column3。

按照你昨天帮忙，我修改了程序。group那个html页面点击add按钮的时候，弹出dialog。当然，这个dialog是动态装载远程url。（保证表和列，能够反应当前编辑结果。如select .. from t1, t2, t3。该url应该将t3表的column也展示出来）

dialog能够正常弹出，但点击ok按钮的时候报错了。

group Html结果是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="../css/flick/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
<style>
	.table-div { width: 280px; padding: 0.5em; float:left}
</style>
	
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>
<title>Select</title>
</head>
<body>
<div style="display:hidden" id="selectColumn"></div>
<script type="text/javascript">
jQuery( document ).ready( function() {
	// list
	jQuery("#group").jqGrid({
		datatype: "local",  
	   	colNames:['Table(Alias)','Column'],
	   	colModel:[
	   		{name:'table',sortable:false},
	   		{name:'column',sortable:false}
	   	],
	   	autowidth: true
	});	
	
	// load pre-defined group colums
	
	jQuery("#group").jqGrid('addRowData',1,
			{table:'demouser (demouser)',column:'id'});	
	
	jQuery("#group").jqGrid('addRowData',2,
			{table:'demouser (demouser)',column:'isManager'});	
	
	jQuery("#group").jqGrid('addRowData',3,
			{table:'demouser (demouser)',column:'name'});	
	
	
	// current select row
	var rowObject=null;
	jQuery("#group").find('tr').each(function(index,tr){
		if(index>0)	{
			$(this).click(function(){  
				rowObject = $(this);
			});
		}	
	});
	
	// bind events with buttons
	jQuery("#add").click(function(){ 
		var url="../query/designQuery?oper=selectColumn&queryId=5";
		var dialog = jQuery("#selectColumn");
		dialog.html("");
        // load remote content
        dialog.load(
            url, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                	modal: true,
                	buttons: {
        				Ok: function() {
        					// TODO get tableSelect and columnSelect values from dialog
        					$( this ).dialog( "close" );
        				}
        			}
                });
            }
        );
        
	});
	
	jQuery("#up").click(function(){ 
		if(rowObject==null)	{
			return false;
		}
		var prev = rowObject.prev();
		if(!prev.get(0)) {
			return false;
		}
		var prev_prev = prev.prev();
		if(!prev_prev.get(0)) {
			return false;
		}
		rowObject.remove();
		rowObject.insertAfter(prev_prev);  
	});
	
	jQuery("#down").click(function(){  
		if(rowObject==null)	{
			return false;
		}
		var next = rowObject.next();
		if(!next.get(0)) {
			return false;
		}
		rowObject.remove();
		rowObject.insertAfter(next);  
	});
	
	jQuery("#delete").click(function(){  
		if(rowObject==null)	{
			return false;
		}
		rowObject.remove();  
	});
});
</script>
	<input type="button" id="add" value="Add" />
	<input type="button" id="up" value="Move Up" />
	<input type="button" id="down" value="Move Down" />
	<input type="button" id="edit" value="Edit" />
	<input type="button" id="delete" value="Delete" />
<table id="group"></table>

</body>
</html>

url="../query/designQuery?oper=selectColumn&queryId=5"; 弹出的dialog html代码是：
dialog取内容是POST方法，请注意
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="../css/flick/jquery-ui-1.8.5.custom.css" />
	
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

</head>
<body>

<script>
var allColumnArray=new Array();

allColumnArray[0]=new Array('id','loginName','name','password','companyId','departmentId','isManager','hireDate');	

allColumnArray[1]=new Array('id','name','parentId','companyLevel');	

allColumnArray[2]=new Array('id','name','parentId');	

jQuery( document ).ready( function() {
	// cascade tableSelect with columnSelect
	jQuery("#tableSelect").change(function() { 
		var index=jQuery(this).get(0).selectedIndex;
		
		changeColumnOptions(index);
	});
	
	changeColumnOptions(0);
});

function changeColumnOptions( index ) {
	var oColumnSelect=jQuery("#columnSelect");
	oColumnSelect.find("option").remove();
			
	var columnArray=allColumnArray[index]; 
	for( i=0; i<columnArray.length; i++ ) {
		var oOption=new Option(columnArray[i],columnArray[i]);
		oColumnSelect.append( oOption );
	}
}
</script>

<label>Table:</label>
<select id="tableSelect" name="table">
	
	<option value="demouser (demouser)">demouser (demouser)</option>	
	
	<option value="company (company)">company (company)</option>	
	
	<option value="department (department)">department (department)</option>	
	
</select>
<br/>
<label>Column:</label>
<select id="columnSelect" name="column">
</select>
</body>
</html>

点击OK按钮，报错（使用firebug看到的错误）：uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'close'

2010/12/31 chen david <delphi...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Ralasafe dev" group.
To post to this group, send email to ralasa...@googlegroups.com.
To unsubscribe from this group, send email to ralasafe-dev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/ralasafe-dev?hl=en.

王成栋

unread,

Jan 1, 2011, 9:06:55 PM1/1/11

to ralasa...@googlegroups.com

应该是

Ok: function() {
    // TODO get tableSelect and columnSelect values from dialog
    $( this ).dialog( "close" );

}

有问题，
换成
$("#selectColumn").dialog("close")试一下

Julian Wong

unread,

Jan 1, 2011, 10:19:02 PM1/1/11

to ralasa...@googlegroups.com

uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'close'

换了一下，还是这个错误。理论上来说，点击OK按钮的时候，dialog已经初始化完成了。怎么错误还提示初始化没有完成呢？

2011/1/2 王成栋 <chengd...@gmail.com>

王成栋

unread,

Jan 2, 2011, 10:49:43 PM1/2/11

to ralasa...@googlegroups.com

看不出什么毛病来，我猜测可能是在load函数里面初始化dialog的缘故，建议换种写法试一下，利用jquery ui dialog的open事件，在open事件中加载dialog中的html，

$( "#selectColumn" ).dialog({
   open: function(event, ui) {
      //在这里$("#selectColumn").load().....

   },


   modal: true,
   buttons: {
        	Ok: function() {

        	   $( this ).dialog( "close" );
                 }

             }
});

Julian Wong

unread,

Jan 3, 2011, 2:57:25 AM1/3/11

to ralasa...@googlegroups.com

谢谢你的再三帮忙。

我将程序改为：

dialog.dialog({

open: function(event, ui) {

dialog.load( url );

},

modal: true,

buttons: {

Ok: function() {

$( this ).dialog( "close" );

}

});

目前，OK按钮是可以了。不过dialog弹出后，也调用了load从后台调用数据，但dialog里面没有内容了，就一个OK按钮。

使用firebug显示，load方法生效，确实请求了后台。

2011/1/3 王成栋 <chengd...@gmail.com>

Julian Wong

unread,

Jan 4, 2011, 2:53:17 AM1/4/11

to ralasa...@googlegroups.com

OK，现在好了。没有问题了。目前代码是这样的：

jQuery("#add").click(function(){

var url="../query/designQuery?oper=selectColumn&queryId=<%=strQueryId%>";

var dialog = jQuery("#selectColumn");

dialog.html("");

// load remote content

dialog.load(

url,

{},

function (responseText, textStatus, XMLHttpRequest) {

dialog.dialog({

modal: true,

buttons: {

Ok: function() {

// TODO get tableSelect and columnSelect values from dialog

jQuery("#selectColumn").dialog( "close" );

}

});

}

);

});

还原来代码比对了一下，没有发现什么区别。

另外：我在进行google的时候，看到这样的问题：

http://efreedom.com/Question/1-2050933/JQuery-Dialog-Question-Change-Button-Init

回答者，说的'option'，添加了这个有什么作用？

2011/1/3 Julian Wong <rala...@gmail.com>

--

Julian Wong 汪金保

@ralasafe (twitter, 新浪)

http://www.ralasafe.org ( Open Source Access Control Middleware )

Julian Wong

unread,

Jan 4, 2011, 4:47:31 AM1/4/11

to ralasa...@googlegroups.com

不知道是否与这个有关：将dialog引用的远程文件jquery.js引用去掉了？

2011/1/4 Julian Wong <rala...@gmail.com>

王成栋

unread,

Jan 4, 2011, 9:42:24 AM1/4/11

to ralasa...@googlegroups.com

这个搞不懂～～

--
<a href="http://www.ralasafe.org">Ralasafe web site</a>
<a href="http://groups.google.com/group/ralasafe-dev?hl=en?hl=en">Visit group</a>
<a href="ralasafe-dev...@googlegroups.com">Unsubscribe</a>

Reply all

Reply to author

Forward