jquery-ui 使用总结
2012-10-16 10:52
513 查看
jquery-ui支持拖拽 本文贴的重点是拖拽后同步后台并维护前台数据一与后台数据致的代码
js代码
后台service逻辑代码
后台Dao代码
ibaits
js代码
<!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">
<title>categoryList</title>
<link rel="stylesheet" type="text/css" href="media/css/easyui.css">
<link href="media/css/icon.css" rel="stylesheet" type="text/css" />
<link href="media/css/tree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="media/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="media/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="media/js/jquery.form-new.js"></script>
<script type="text/javascript">
$(function(){
$('#root').tree({
url:'category.jhtml?event=childrenName',
method:"post",
animate:true,
dnd:true,
onClick:function(node){
$.ajax({
url:"category.jhtml",
data: {"event":"detail","UUID":node.id},
type: "post",
success: function (datas) {
$("#indexRight").html(datas);
var nodeParent = $('#root').tree('getParent', node.target);
$("#categoryInfoParentName").val(nodeParent.text);
var date = new Date();
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
$("#categoryInfoUpdateTime").val(dateStr);
$("#categoryInfoForm").submit(function() { $(this).ajaxSubmit(function(data){
alert(data);
$('#root').tree('reload', nodeParent.target);
});return false;
})
}
});
$('#root').tree('expand',node.target);
},
onDrop:function(target, source, point){
var targetNode = $('#root').tree('getNode', target);
var targetParentNode = $('#root').tree('getParent', target);
var sourceParentNode = $('#root').tree('find', source.attributes.parentUUID);
var targetParentUUID = targetNode.attributes.parentUUID;
var sourceParentUUID = source.attributes.parentUUID;
var targetOrd = targetNode.attributes.ord;
var sourceOrd = source.attributes.ord;
var dataForUpdate;
var dataForUpdateChildOrd;
var operatorName;
var changeOrd;
console.log("targetOrd -- "+targetOrd)
console.log("sourceOrd -- "+sourceOrd)
console.log("target.innerHTML -- "+target.innerHTML)
console.log("targetParentUUID -- "+targetParentUUID)
console.log("sourceParentUUID -- "+sourceParentUUID)
console.log("point -- "+point)
if(targetParentUUID == sourceParentUUID){
console.log("A")
if(targetOrd > sourceOrd){
if("top" == point){
targetOrd --;
}
operatorName = "bottom";
changeOrd = function(){
var children = getDirectChildren(targetParentNode.target);
console.log("children.length -- " +children.length)
for(var i = 0;i<children.length;i++){
var divEle = $(children[i]).children()[0];
var divID = $(divEle).attr("node-id");
console.log("divID -- " + divID)
var childNode = $("#root").tree('find',divID);
var dataOrd = childNode.attributes.ord;
if(dataOrd > sourceOrd && dataOrd <= targetOrd){
childNode.attributes.ord--;
}
}
source.attributes.ord = targetOrd;
}
}else{
if("bottom" == point){
targetOrd ++;
}
operatorName = "top";
changeOrd = function(){
var children = getDirectChildren(targetParentNode.target);
for(var i = 0;i<children.length;i++){
var divEle = $(children[i]).children()[0];
var divID = $(divEle).attr("node-id")
console.log("divID -- " + divID)
var childNode = $("#root").tree('find',divID);
var dataOrd = childNode.attributes.ord;
if(dataOrd < sourceOrd && dataOrd >= targetOrd){
childNode.attributes.ord++;
}
}
source.attributes.ord = targetOrd;
}
}
dataForUpdateChildOrd = {"event":"updateChildOrd","parentUuid":targetParentUUID,"targetOrd":targetOrd,"sourceOrd":sourceOrd,"operatorName":operatorName};
dataForUpdate = {"event":"update","uuid":source.id,"ord":targetOrd};
}else{
console.log("B")
operatorName = "append";
if("bottom" == point){
targetOrd ++;
}
dataForUpdate = {"event":"update","uuid":source.id,"parentUuid":targetParentUUID,"ord":targetOrd};
dataForUpdateChildOrd = {"event":"updateChildOrd","parentUuid":targetParentUUID+"#"+sourceParentUUID,"targetOrd":targetOrd,"sourceOrd":sourceOrd,"operatorName":operatorName};
changeOrd = function(){
var sourceChildren = getDirectChildren(sourceParentNode.target);
for(var i = 0;i<sourceChildren.length;i++){
var divEle = $(sourceChildren[i]).children()[0];
var divID = $(divEle).attr("node-id")
var childNode = $("#root").tree('find',divID);
var dataOrd = childNode.attributes.ord;
if(dataOrd > sourceOrd){
childNode.attributes.ord--;
console.log(childNode.text+"-->"+childNode.attributes.ord)
}
}
var targetChildren = getDirectChildren(targetParentNode.target);
for(var i = 0;i<targetChildren.length;i++){
var divEle = $(targetChildren[i]).children()[0];
var divID = $(divEle).attr("node-id")
if(source.id != divID){
var childNode = $("#root").tree('find',divID);
var dataOrd = childNode.attributes.ord;
if(dataOrd >= targetOrd){
childNode.attributes.ord++;
console.log(childNode.text+"-->"+childNode.attributes.ord)
}
}
}
source.attributes.parentUUID = targetParentUUID;
source.attributes.ord = targetOrd;
}
}
$.ajax({
url:"category.jhtml",
data:dataForUpdateChildOrd ,
type: "post",
success: function (data){
if("true"==data){
$.ajax({
url:"category.jhtml",
data: dataForUpdate,
type: "post",
success: function (data) {
if("更新成功"== data){
changeOrd();
}
}
});
}
}
})
}
})
})
/*返回的是li对象*/
function getDirectChildren(target){
return $(target).next().children();
}
function append(){
var node = $('#root').tree('getSelected');
if(node){
var ord = $(node.target).next().children().length;
console.log(ord);
$('#root').tree('append', {
parent: (node?node.target:null),
data: [{
id: $.ajax({url:"category.jhtml?event=uuid&parentUUID="+node.id+"&ord="+ord,async:false}).responseText,
text: '新建文件夹',
iconCls:"icon-save",
state:"closed",
attributes:{"ord":ord,"parentUUID":node.id}
}]
});
}else{
alert("请先选择你要append到的节点....");
}
}
function remove(){
var node = $('#root').tree('getSelected');
var result = $.ajax({
url:"category.jhtml?event=delete&UUID="+node.id,
async:false
}).responseText;
if(result){
$('#root').tree('remove', node.target);
alert("删除成功")
}else{
alert("删除失败")
}
}
function reload(parentNode){
if (parentNode){
$('#root').tree('reload', parentNode.target);
} else {
$('#root').tree('reload');
}
console.log("reload");
// $('#root').tree('expand',parentNode.target);
}
</script>
</head>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300">
<a onclick="append()" href="#">append</a><a onclick="remove()" href="#">remove</a>
<ul id="root"></ul>
<td><div id="indexRight" height="100%" width="100%">
</div></td>
</tr>
</table>
</body>
</html>后台service逻辑代码
@Override
public Object handleDefault(IPresentationContext context) throws Exception {
return new FMViewAndModelResult("categoryList.html", null);
}
@To("json")
public Object handleChildren(IPresentationContext context) throws Exception {
String parentUUID = context.getParameter("parentUUID");
List<QCategory> categorieList = categoryService.getCategoryByPids(parentUUID);
return categorieList;
}public Object handleChildrenName(IPresentationContext context) throws Exception {
String parentUUID = context.getParameter("id");
StringBuilder strBuilder = new StringBuilder("[");
if(parentUUID == null){
strBuilder.append("{\"id\":\"0\"");
strBuilder.append(",\"text\":\"");
strBuilder.append("根");
strBuilder.append("\",\"iconCls\":\"icon-save\"");
strBuilder.append(",\"state\":\"closed\"");
strBuilder.append(",\"attributes\":{\"ord\":0,\"parentUUID\":-1}}");
strBuilder.append("]");
}else{
List<QCategory> categorieList = categoryService.getCategoryByPids(parentUUID);
for(int i = 0;i<categorieList.size();i++){
strBuilder.append("{\"id\":\"");
strBuilder.append(categorieList.get(i).getUuid());
strBuilder.append("\",\"text\":\"");
strBuilder.append(categorieList.get(i).getName());
strBuilder.append("\",\"iconCls\":\"icon-save\"");
strBuilder.append(",\"state\":\"closed\"");
strBuilder.append(",\"attributes\":{\"ord\":");
strBuilder.append(categorieList.get(i).getOrd());
strBuilder.append(",\"parentUUID\":");
strBuilder.append("\""+parentUUID+"\"");
strBuilder.append("}},");
}
strBuilder.setLength(strBuilder.length()-1);
strBuilder.append("]");
}
return strBuilder.toString();
}
public Object handleDetail(IPresentationContext context) throws Exception {
String UUID = context.getParameter("UUID");
if(StringUtils.isNotEmpty(UUID)){
QCategory category = categoryService.getCategory(UUID);
Map<String, QCategory> map = new HashMap<String, QCategory>();
map.put("category", category);
return new FMViewAndModelResult("categoryInfo.html", map);
}
return "";
}
public Object handleUuid(IPresentationContext context) throws Exception {
String parentUUID = context.getParameter("parentUUID");
String ordStr = context.getParameter("ord");
// ordStr = ordStr == null?"0":ordStr;
int ord = Integer.parseInt(ordStr);
QCategory category = new QCategory();
category.setName("新建文件夹");
category.setParentUuid(parentUUID);
category.setCreateTime(new Date());
category.setOrd(ord);
String uuid = categoryService.addCategory(category);
return uuid;
}
public Object handleUpdate(IPresentationContext context) throws Exception {
String parentUUID = context.getParameter("parentUuid");
String uuid = context.getParameter("uuid");
String targetOrdStr = context.getParameter("targetOrd");
// targetOrdStr = targetOrdStr == null?"0":targetOrdStr;
// sourceOrdStr = sourceOrdStr == null?"0":sourceOrdStr;
// int targetOrd = Integer.parseInt(targetOrdStr);
QCategory category = DataHelper.getObject(QCategory.class, context,"yyyy-MM-dd",new HashMap<String, String>(),null);
boolean flag = categoryService.updateCategory(category);
return flag?"更新成功":"更新失败";
}
public boolean handleUpdateChildOrd(IPresentationContext context) throws Exception {
String parentUUID = context.getParameter("parentUuid");
String targetOrdStr = context.getParameter("targetOrd");
String sourceOrdStr = context.getParameter("sourceOrd");
String operatorName = context.getParameter("operatorName");
// targetOrdStr = targetOrdStr == null?"0":targetOrdStr;
// sourceOrdStr = sourceOrdStr == null?"0":sourceOrdStr;
int targetOrd = Integer.parseInt(targetOrdStr);
int sourceOrd = Integer.parseInt(sourceOrdStr);
return categoryService.updateChildOrd(parentUUID, targetOrd, sourceOrd,operatorName);
}
public Object handleDelete(IPresentationContext context) throws Exception {
String uuid = context.getParameter("UUID");
boolean flag = categoryService.deleteCategory(uuid);
return flag;
}
class Node{
String id;
String text;
String iconCls;
String state;
}后台Dao代码
@Override
public boolean updateChildOrd(String parentUUID,int targetOrd,int sourceOrd,String operatorName) throws SQLException{
Map<String, Object> map = new HashMap<String, Object>();
map.put("targetOrd", targetOrd);
map.put("sourceOrd", sourceOrd);
if("top".equals(operatorName)){
map.put("parentUUID", parentUUID);
this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForTop", map);
}else if("bottom".equals(operatorName)){
map.put("parentUUID", parentUUID);
this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForBottom", map);
}else if("append".equals(operatorName)){
String[] parentUUIDArr = parentUUID.split("#");
map.put("targetParentUUID", parentUUIDArr[0]);
map.put("sourceParentUUID", parentUUIDArr[1]);
this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForAppendTarget", map);
this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForAppendSource", map);
}
return true;
}ibaits
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN" "http://ibatis.apache.org/dtd/sql-map-2.dtd"> <sqlMap namespace="qbt_category_ext"> <select id="getCategoryNameByPids" parameterClass="string" resultClass="string"> select name from qbt_category where parent_uuid = #parentCategoryUuid# </select> <update id="updateChildOrdForTop" parameterClass="map"> update qbt_category set ord = ord + 1 where parent_uuid = #parentUUID# and ord >= #targetOrd# and ord < #sourceOrd# </update> <update id="updateChildOrdForBottom" parameterClass="map"> update qbt_category set ord = ord - 1 where parent_uuid = #parentUUID# and ord > #sourceOrd# and ord <= #targetOrd# </update> <update id="updateChildOrdForAppendTarget" parameterClass="map"> update qbt_category set ord = ord + 1 where parent_uuid = #targetParentUUID# and ord >= #targetOrd# </update> <update id="updateChildOrdForAppendSource" parameterClass="map"> update qbt_category set ord = ord - 1 where parent_uuid = #sourceParentUUID# and ord >= #sourceOrd# </update> </sqlMap>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQueryUI datepicker使用总结
- jQuery UI dialog 的使用总结
- JQuery Kendo UI使用技巧总结
- jquery easy ui 使用总结
- JQuery Kendo UI使用技巧总结
- JQuery Kendo UI使用技巧总结
- JQuery Kendo UI使用技巧总结
- JQuery Kendo UI使用技巧总结
- 事件代理总结： 已经有一些使用主流类库的事件代理示例出现了，比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子，比如说Usable Type blog上的这一个。一旦需要的话，事件代理将是你工具箱里的一件得心应手的工具，而且它很容易实现。
- 前端控件之Jquery datetimepicker的使用总结
- JQuery Validate使用总结
- jQuery Easy UI 使用
- 关于jquery-weui.js中时间控件datetimepicker的使用
- 初学jQuery Easy UI的总结
- 如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?
- 在asp.net工程中使用jQuery-ui的autocomplete功能
- 等待刷新之利器 -- 简单使用JQuery BlockUI
- jquery.ui.draggable使用
- jQuery各种选择器、节点、事件，删除、复制、插入元素的使用方法总结
- jquery 使用的一些总结