统用的CRUD操作,用于后台管理
技术 : webwork jquery dbutils
/*
@(#) showResource.js 静态资源管理_ajax 动态显示
@author chujz
@version 1.0 2010-01-01
*/
$(function(){
var showname = {a_resource_id:'资源编号',b_name:'资源名称',c_url:'超链接地址',d_module:'所属模块',e_pic_url:'图片地址',f_display:'是否首页显示',g_createdate:'创建时间'};
var __serverUrl = "/clubbg/ajax/ajaxRequest.action" // ajax统一提交路径
var __async = false; //默认为同步加载
var __timeout =4000; //默认超时时间
var __dataType = 'xml'; //接改数据格式
var __type = 'post'; //提交方式
var ajaxObj = { url: __serverUrl, type: __type, async: __async, dataType: __dataType, timeout: __timeout, error: error }; //ajax提交参数对象
$("table").append("<tr></tr>"); //组装列名
$.each(showname,function(i,value){
var __th = $("<th></th>").html(value).appendTo("table tr");
if(i=='a_resource_id')
__th.hide(); //id 不显示
})
var dialogObj = { autoOpen: false, modal: true, resizable: false, width: 600, height: 350, minWidth: 600, minHeight: 350 }; //定义模态对话框,其相应的button动态set
$("#dialog").dialog(dialogObj);
$("#module").change(function(){
$("#dialog").text(""); //清空单项数据
var __data = { sqlNames: 'getResource', type: 2 }
__data['map.module'] = $(this).val(); //放初始化外面
ajaxObj.data = __data;
ajaxObj.success = function(xml){
$("table tr:gt(0)").remove(); //清空原来的显示数据
$("table").next("span").remove();
if($("entry",xml).length>0){
$("entry",xml).each(function(i){ //解析每条记录对应的数据
var append_tr = "<tr>";
$(this).children().each(function(j){
if(j==0) //把编号隐藏起来
append_tr = append_tr + "<td style='display:none',name='" + $(this)[0].tagName + "'>" + $(this).text() + "</td>" ;
else
append_tr = append_tr + "<td name='" + $(this)[0].tagName + "'>" + $(this).text() + "</td>" ;
})
append_tr = append_tr + "</tr>"
$("table").append(append_tr)
});
$("table td[name='f_display']").each(function(){ //对true 及 false的处理
$(this).text($(this).text()=='1'?'是':'否'); //各字符串true比较
})
var obj = new MyObj(); //对模块显示汉化
$("table td[name='d_module']").each(function(i){
$(this).text(obj[$(this).text()]);
})
// TODO: 对图片的处理,悬浮时可以查看图片...
$("table tr:gt(0)").each(function(){ //添加相应的超链接
$("td:eq(1)",this).css("cursor","pointer").click(function(){
ajaxObj.data = "type=1&sqlNames=getOneResource&map.a_resource_id="+$(this).prev("td").text();
ajaxObj.success = function(xml){
$("#dialog").html('<p id="validateTips">所有字段必填.链接以“http://”开始,没有链接请输入“#”</p>');
$("entry",xml).each(function(){
var append_dl = $("key",this).text()
$("#dialog").append($("<dt></dt>").html(showname[$("key",this).text()]));
$("<dd></dd>").html($("<input size='45' type='text' name='"+$("key",this).text()+"'/>").val($("value",this).text())).appendTo("#dialog");
})
$("dd input[name='a_resource_id']").add("dd input[name='d_module']").parent().prev("dt").andSelf().hide() //隐藏a_resource_id及d_module
if($("dd input[name='f_display']").val() == 0) //对布尔的处理
$("dd:has(input[name='f_display'])").html("<input type='radio' name='f_display' value='1' />是<input type='radio' name='f_display' value='0' checked />否");
else
$("dd:has(input[name='f_display'])").html("<input type='radio' name='f_display' value='1' checked />是<input type='radio' name='f_display' value='0' />否");
$("#dialog").dialog('option','buttons', { //打开前设定button
'修改': function() { //修改的时候要把id放在where的位置上,id的顺序后移
var bValid = true;
var reg = /(^http:\/\/|^#$)/; //url校验
// 1: 参数校验_长度校验
$("*[name]",this).removeClass('ui-state-error').each(function(){
bValid = bValid && checkLength($(this),showname[$(this).attr("name")],1,100);
if($(this).attr("name").indexOf("url") != -1 && bValid){ //对url的检验
bValid = checkRegexp($(this),reg,"超链接地址格式不正确");
}
});
if (bValid) { // 2: ajax提交
var __data = { type: 3, sqlNames: 'modifyOneResource'};
$("input[type='text']:visible",this).each(function(){
__data['map.'+$(this).attr('name')] = encodeURI(encodeURI($(this).val())); //对中文处理
})
$("input[type='radio']:checked",this).each(function(){ //radio的处理
__data['map.'+$(this).attr('name')] = encodeURI(encodeURI($(this).val())); //对中文处理
})
__data['map.z_resourced_id'] = $("*[name='a_resource_id']").val(); //id 放在参数的最后
ajaxObj.data = __data;
ajaxObj.success = function(xml){
var msg = '';
$("entry",xml).each(function(){
msg = msg + " "+$("value",this).text();
})
alert(msg);
}
$.ajax(ajaxObj);
$(this).dialog('close');
$("#module").trigger('change'); //触发 change 函数
}
},
'删除': function() {
if(confirm('确实要删除吗')){
var __data = { type: 3, sqlNames: 'deleteOneResource' };
__data['map.a_resourced_id'] = $("input[name='a_resource_id']",this).val();
ajaxObj.data = __data;
ajaxObj.success = function(xml){
var msg = '';
$("entry",xml).each(function(){
msg = msg + " "+$("value",this).text();
})
alert(msg);
}
$.ajax(ajaxObj);
$(this).dialog('close');
$("#module").trigger('change'); //触发 change 函数
}
}
}) //button设定end
$("#dialog").dialog('open'); //打开模态对话框
}
$.ajax(ajaxObj);
});
})
}else{
$("table").after("<span color='#f88'>没有相应的资源</span>");
}
};
$.ajax(ajaxObj);
})
$('#create').click(function() {
if($("#module").val() == -1 ){
$("#dialog").html('请先选择资源类型');
$("#dialog").dialog('option','buttons', {'确定':function(){$(this).dialog('close')}});
$("#dialog").dialog('open');
}else{ //生成添加时对话页面
$("#dialog").html('<p id="validateTips">所有字段必填.链接以“http://”开始,没有链接请输入“#”</p>');
if($("#module").val() == 1 )
$("#dialog p").append(" <br/><font color=red>小图片的命名规则: 大图标的名字后加_small</font>");
$.each(showname,function(name,value){
if(name!='a_resource_id' && name!='g_createdate'){ //添加时 资源编号、创建时间 不显示
var append_dl = name;
$("#dialog").append($("<dt></dt>").html(value));
var valStr = "";
if(name.search(/url/g) != -1){
valStr = "http://";
}
$("<dd></dd>").html($("<input type='text' name='"+name+"'/>").val(valStr)).appendTo("#dialog");
}
})
$("dd input[name='d_module']","#dialog").val($("#module").val()).parent().prev("dt").andSelf().hide(); ////添加的类型隐藏提交或者不显示_隐藏提交
$("dd:has(input[name='f_display'])").html("<input type='radio' name='f_display' value='1' checked />是<input type='radio' name='f_display' value='0' />否");
$("#dialog").dialog('option','buttons', { //打开前设定button
'添加': function() {
var bValid = true;
var reg = /(^http:\/\/|^#$)/; //url校验
$("*[name]",this).removeClass('ui-state-error').each(function(){
// 1: 参数校验_长度校验
bValid = bValid && checkLength($(this),showname[$(this).attr("name")],1,100);
//对url的检验
if($(this).attr("name").indexOf("url") != -1 && bValid){
bValid = checkRegexp($(this),reg,"超链接地址格式不正确");
}
});
if (bValid) { // 2: ajax提交
var __data = {type:3,sqlNames:'addOneResource'};
$("*[name]",this).each(function(){
__data['map.'+$(this).attr('name')]=encodeURI(encodeURI($(this).val()))
})
ajaxObj.data = __data;
ajaxObj.success = function(xml){
var msg = '';
$("entry",xml).each(function(){
msg = msg + " "+$("value",this).text();
})
alert(msg); //提示操作结果
}
$.ajax(ajaxObj);
$(this).dialog('close'); //提示结果后关闭
$("#module").trigger('change'); //触发 change 函数
}
}
});//button设定end
$('#dialog').dialog('open');
}
})
})
分享到:
相关推荐
在本教程中,我们将探讨如何使用jQuery_api_for_dwcs5这个插件将其集成到Dreamweaver(DWCS5)中,从而在DW环境下更方便地编写和调试jQuery代码。 首先,了解jQuery的核心概念至关重要。jQuery的核心功能包括选择器...
**jQuery Ajax 分页插件 jquery_paginator 知识点详解** 在Web开发中,当页面数据量过大时,为了提高用户体验和加载速度,通常会采用分页技术来展示数据。jQuery是一个广泛使用的JavaScript库,提供了丰富的功能来...
jQuery提供了一些全局Ajax事件,可以在任何Ajax请求发生时触发,如`ajaxStart`、`ajaxSend`、`ajaxSuccess`、`ajaxError`等。这些事件可以用于统一处理所有Ajax请求的状态。 ### 7. JSONP (JSON with Padding) 当...
本项目“jquery_ajax_php_三级联动.rar”显然关注的是如何利用这些技术实现一个三级联动的效果,这是一种常见的交互设计,常用于下拉菜单、地区选择等场景,让用户能够按层次逐级选择。下面我们将详细探讨这些知识点...
《jQuery与AJAX技术详解》 在Web开发领域,jQuery和AJAX是两个不可或缺的工具。jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的使用,而AJAX(Asynchronous JavaScript and XML)则是一种使得网页...
总结起来,"Jquery_Ajax_Struts2_Action_JSP_Json"的示例展示了如何利用jQuery的Ajax功能与Struts2框架相结合,通过JSON数据格式在客户端和服务器端之间进行高效的数据交换,从而实现无刷新的页面更新,提升Web应用...
本资源"Ajax-json.rar"显然是一份关于如何利用AJAX和JSON进行Web开发的实例教程。以下是关于这两个主题的详细讲解。 **AJAX (异步JavaScript和XML)** AJAX是一种在无需刷新整个页面的情况下,能够更新部分网页的...
在本文中,我们将深入探讨jQuery的Ajax功能,特别是通过`jQuery.get()`和`jQuery.post()`这两个简单方法以及核心的`jQuery.ajax()`方法。这些方法使得与服务器的异步通信变得更加容易。 首先,`jQuery.load()`方法...
HTML静态页面与jQuery AJAX是Web开发中的重要技术组合,它们为网页提供了无刷新的数据交互能力,提升了用户体验。在这个"html静态页JQuery ajax示例demo 源码"中,我们可以深入学习和理解AJAX在C# ASP.NET环境下的...
在本教程中,我们将学习如何利用jQuery的$.ajax()方法来发起AJAX请求。 接下来,我们转向PHP。这是一种服务器端脚本语言,常用于处理来自客户端的数据,如HTML表单提交。在与AJAX结合时,PHP可以接收并处理由jQuery...
jquery.tablednd_0_5.js
通过使用jQuery,开发者可以以较少的代码量实现功能丰富的Ajax表单提交,无需手动处理复杂的XMLHttpRequest对象。这种技术允许数据在后台与服务器之间异步传输,无需重新加载整个页面,从而提高了应用的性能和用户...
《jQuery AJAX 操作详解及其应用》 在前端开发中,jQuery 框架以其简洁、易用的API,极大地简化了JavaScript的复杂性,尤其是在处理AJAX(Asynchronous JavaScript and XML)请求时。本篇文章将深入探讨jQuery中的...
python 17、AJAX异步 3-1_使用jQuery实现AJAX操作、跨域_Day03_am.mp4
在本问题中,我们关注的是在IE8浏览器中使用jQuery的Ajax功能获取静态资源时遇到的“TypeError:拒绝访问”错误。这个问题通常与跨域请求(CORS)和浏览器的兼容性有关。 首先,让我们深入理解Ajax。Ajax...
在探讨如何利用jQuery的AutoComplete插件结合Ajax与JSON数据实现自动补全功能之前,我们首先需要理解几个关键概念:jQuery、Ajax、JSON以及AutoComplete。 ### jQuery简介 jQuery是一款快速、简洁的JavaScript库,...
**jQuery AJAX分页技术详解** 在Web开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高页面加载速度,优化用户体验。jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和...
**jQuery与Ajax的结合使用详解** 在Web开发中,jQuery是一个强大的JavaScript库,它极大地简化了JavaScript的使用,特别是对于DOM操作、事件处理以及动画效果。而Ajax(异步JavaScript和XML)则是一种创建动态网页...
这个“jquery_api.rar”压缩包包含了一份详细的jQuery API参考文档(jquery_api.chm)以及可能的资源链接(www.pudn.com.txt),旨在帮助开发者更深入地理解和运用jQuery。 **jQuery 基本概念** 1. **选择器...