[jquery] 查询设计里面的分组，column上下移动问题
22 views
Skip to first unread message
Julian Wong
Dec 30, 2010, 10:16:23 PM12/30/10
to ralasa...@googlegroups.com
我目前做数据查询在线设计在这块。查询语句可能会有group 条件。如group by t1.column1, t2.column2
现页面展现部分，使用jqgrid来实现。页面负责展示：数据表名称，数据表别名，列名。然后有增加，删除，上移，下移功能。
<script type="text/javascript">jQuery( document ).ready( function() {// listjQuery("#group").jqGrid({datatype: "local",colNames:['Table', 'Alias', 'Column'],colModel:[{name:'table',sortable:false},{name:'alias',sortable:false},{name:'column',sortable:false}]});// load pre-defined group columsjQuery("#group").jqGrid('addRowData',1,{table:'demouser',alias:'demouser',column:'id'});jQuery("#group").jqGrid('addRowData',2,{table:'demouser',alias:'demouser',column:'isManager'});// bind events with buttons});</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>
问题
请问：up, down按钮，绑定的event该怎么写呢？
--
--
Julian Wong
汪金保
Founder and Team LeaderOpen Source Access Control Middleware
http://www.ralasafe.org
http://www.ralasafe.org
Julian Wong
Dec 30, 2010, 10:26:15 PM12/30/10
to ralasa...@googlegroups.com
Julian Wong
Dec 30, 2010, 10:46:11 PM12/30/10
to ralasa...@googlegroups.com
chen david
Dec 30, 2010, 11:39:00 PM12/30/10
to ralasa...@googlegroups.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>
<script src="http://www.trirand.com/blog/jqgrid//js/jquery.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// list
jQuery("#group").jqGrid({
datatype: "local",
colNames:['Table', 'Alias', 'Column'],
colModel:[
{name:'table',sortable:false},
{name:'alias',sortable:false},
{name:'column',sortable:false}
]
});
// load pre-defined group colums
jQuery("#group").jqGrid('addRowData',1,
{table:'demouser',alias:'demouser',column:'id'});
jQuery("#group").jqGrid('addRowData',2,
{table:'demouser',alias:'demouser',column:'isManager'});
//当前行坐标
var row_index=1;
var trs = jQuery("#group").find('tr');
//最小行坐标
var row_index_min = 1;
//最大行坐标
var row_index_max = trs.size();
jQuery.each(trs,function(index,tr){
if(index>0)
{
$(this).click(function(){
row_index = index;
});
}
});
jQuery("#up").click(function(){
if(!checkBoundary())
{
return false;
}
row_index++;
changeCss();
alert("index:"+row_index);
});
jQuery("#down").click(function(){
if(!checkBoundary())
{
return false;
}
row_index--;
changeCss();
alert("index:"+row_index);
});
function changeCss(){
};
function checkBoundary(){
return true;
};
});
</script>
</head>
<body>
<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>
是不是这个效果？
Julian Wong
Dec 31, 2010, 12:21:11 AM12/31/10
to ralasa...@googlegroups.com
不是这种效果。
例子里面是两行：demouser/demouser/id和demouser/demouser/isManager两行。
比如说我选中demouser/demouser/id这一行，然后点击down按钮。
效果应该是：
demouser/demouser/isManager和demouser/demouser/id两行。
选中id行，点击up，又变成demouser/demouser/id和demouser/demouser/isManager两行
--
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.
chen david
Dec 31, 2010, 1:24:14 AM12/31/10
to ralasa...@googlegroups.com
应该是这样的了
{table:'demouser',alias:'demouser',column:'isManager1'});
jQuery("#group").jqGrid('addRowData',2,
{table:'demouser',alias:'demouser',column:'isManager2'});
jQuery("#group").jqGrid('addRowData',2,
{table:'demouser',alias:'demouser',column:'isManager3'});
jQuery("#group").jqGrid('addRowData',2,
{table:'demouser',alias:'demouser',column:'isManager4'});
//当前行坐标
var rowObject=null;
jQuery("#group").find('tr').each(function(index,tr){
if(index>0)
{
$(this).click(function(){
rowObject = $(this);
alert(this);
});
}
});
jQuery("#up").click(function(){
//alert(rowObject);
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(){
//alert(rowObject);
if(rowObject==null)
{
return false;
}
var next = rowObject.next();
if(!next.get(0))
{
return false;
}
rowObject.remove();
rowObject.insertAfter(next);
});
});
</script>
</head>
<body>
<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>
Julian Wong
Dec 31, 2010, 1:28:52 AM12/31/10
to ralasa...@googlegroups.com
0 new messages