Jquery动态添加多行，返回数据至每一行中
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sys_channel_edit.aspx.cs" Inherits="DTcms.Web.admin.settings.sys_channel_edit" ValidateRequest="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>编辑频道信息</title>
<link href="../../scripts/ui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="../images/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery/messages_cn.js"></script>
<script type="text/javascript" src="../../scripts/ui/js/ligerBuild.min.js"></script>
<script type="text/javascript" src="../js/function.js"></script>
<script type="text/javascript">
//表单验证
$(function () {
$('#txtName').focus();
$("#form1").validate({
errorPlacement: function (lable, element) {
element.ligerTip({ content: lable.html(), appendIdTo: lable });
},
rules: {
txtName: {
required: true,
minlength: ,
maxlength: ,
remote: {
type: "post",
url: "../../tools/admin_ajax.ashx?action=sys_channel_validate",
data: {
channelname: function () {
return $("#txtName").val();
},
oldname: function () {
return $("#hidName").val();
}
},
dataType: "html",
dataFilter: function (data, type) {
if (data == "true")
return true;
else
return false;
}
}
}
},
success: function (lable) {
lable.ligerHideTip();
},
messages: {
txtName: {
required: "输入(2-100)位字符",
minlength: "必须大于2位字符",
maxlength: "必须小于100位字符",
remote: "很抱歉，该名称已被使用"
}
}
});
});
//菜单事件处理
$(function () {
//初始化按钮事件
$("#item_box tr").each(function (i) {
initButton(i);
});
//添加按钮(点击绑定)
$("#itemAddButton").click(function () {
showChannelDialog();
});
}); //表格行的菜单内容
function getTr() {
var navRow = '<tr class="td_c">'
+ '<td><input type="hidden" name="item_type" /><input type="hidden" name="item_page" /><span class="item_type"></span></td>'
+ '<td><input name="item_name" type="text" class="txtInput small" style="width:98%;" readonly="readonly" /></td>'
+ '<td><input name="item_path" type="text" class="txtInput small3" style="width:98%;" readonly="readonly" /></td>'
+ '<td><input name="item_pattern" type="text" class="txtInput small3" style="width:98%;" readonly="readonly" /></td>'
+ '<td><input name="item_querystring" type="text" class="txtInput small3" style="width:98%;" readonly="readonly" /></td>'
+ '<td><input name="item_templet" type="text" class="txtInput small" style="width:98%;" readonly="readonly" /></td>'
+ '<td align="center"><img alt="编辑" src="../images/icon_edit.gif" class="operator" /><img alt="删除" src="../images/icon_del.gif" class="operator" /></td>'
+ '</tr>';
return navRow;
} //初始化按钮事件
function initButton(indexValue) {
//功能操作按钮
$("#item_box tr:eq(" + indexValue + ") .operator").each(function (i) {
switch (i) {
//修改
case :
$(this).click(function () {
showChannelDialog(this);
});
break;
//删除
case :
$(this).click(function () {
var obj = $(this);
$.ligerDialog.confirm("确定要删除吗？", "提示信息", function (result) {
if (result) {
obj.parent().parent().remove(); //删除节点
}
});
});
break;
}
});
} //给URL配置首页赋值
function itemSelect(obj) {
var value = $(obj).children("option:selected").attr("value");
if (value.length < ) {
return false;
}
var channelName = $("#txtName").val(); //获得频道名称
if (channelName.length < ) {
return false;
}
//咨询是否使用默认设置
$.ligerDialog.confirm("是否使用参考配置？做为参考，请根据自己实际情况调整。", "提示信息", function (result) {
if (result) {
switch (value) {
case "list":
$("#urlKey").val(channelName + "_list");
$("#urlExp").val(channelName + "/{0}/{1}.aspx");
$("#var_box").empty(); //清空旧数据
$("#var_box").append(createVarHtml()); //插入一行
$("#var_box tr:last").find("input[name='varName']").val("category_id");
$("#var_box tr:last").find("input[name='varExp']").val("(\\d+)");
$("#var_box").append(createVarHtml()); //插入一行
$("#var_box tr:last").find("input[name='varName']").val("page");
$("#var_box tr:last").find("input[name='varExp']").val("(\\w+)");
$("#pageTemplet").val(channelName + "_list");
$("#urlPage").val(channelName + "_list");
break;
case "detail":
$("#urlKey").val(channelName + "_show");
$("#urlExp").val(channelName + "/show/{0}.aspx");
$("#var_box").empty(); //清空旧数据
$("#var_box").append(createVarHtml()); //插入一行
$("#var_box tr:last").find("input[name='varName']").val("id");
$("#var_box tr:last").find("input[name='varExp']").val("(\\d+)");
$("#pageTemplet").val(channelName + "_show");
$("#urlPage").val(channelName + "_show");
break;
default:
$("#var_box").empty(); //清空旧数据
$("#urlKey").val(channelName);
$("#urlExp").val(channelName + ".aspx");
$("#pageTemplet").val(channelName);
$("#urlPage").val(channelName);
break;
}
}
});
} //===================================================================================
//创建窗口
function showChannelDialog(obj) {
var objNum = arguments.length;
var tabHtml = createChannelHtml();
var m = $.ligerDialog.open({
type: "",
title: "URL重写配置",
content: tabHtml,
width: ,
buttons: [
{ text: '确认', onclick: function () {
if (objNum > ) {
execChannelDialog(m, obj);
} else {
execChannelDialog(m);
}
}
},
{ text: '关闭', onclick: function () {
m.close();
}
}
],
isResize: true
});
//检查是否修改状态
if (objNum == ) {
//调用赋值函数
setChannelDialog(obj);
}
} //创建HTML
function createChannelHtml() {
var tableHtml = '<table class="form_table">'
+ '<col width="130px"><col>'
+ '<tbody>'
+ '<tr>'
+ '<th>频道类型：</th>'
+ '<td><select id="pageType" class="select2" onchange="itemSelect(this);"><option value="">请选择类型...</option><option value="index">首页</option><option value="list">列表页</option><option value="detail">详细页</option></select></td>'
+ '</tr><tr>'
+ '<th>URL名称(Key)：</th>'
+ '<td><input type="text" id="urlKey" class="txtInput small ime-disabled" /><label>*调用的唯一标识，英文、数字、下划线</label></td>'
+ '</tr><tr>'
+ '<th>重写表达式：</th>'
+ '<td><input type="text" id="urlExp" class="txtInput small ime-disabled" style="width:210px;" /><label>*如：article-{0}-{1}.aspx，{n}表示第N个变量</label></td>'
+ '</tr><tr>'
+ '<th>传输参数：</th>'
+ '<td><button id="btnVarAdd" type="button" class="btnSelect" onclick="addVarTr();"><span class="add">增加变量</span></button></td>'
+ '</tr><tr>'
+ '<th> </th>'
+ '<td><table border="0" cellspacing="0" cellpadding="0" class="border_table" width="98%">'
+ '<thead><tr><th width="40%">变量名称</th><th>正则表达式</th><th width="3%">操作</th></tr></thead>'
+ '<tbody id="var_box">'
+ '</tbody></table></td>'
+ '</tr><tr>'
+ '<th>模板文件：</th><td><input type="text" id="pageTemplet" value="" class="txtInput small ime-disabled" />.html</td>'
+ '</tr><tr>'
+ '<th>生成的文件：</th><td><input type="text" id="urlPage" value="" class="txtInput small ime-disabled" />.aspx</td>'
+ '</tr>'
+ '</tbody>'
+ '</table>'
return tableHtml;
}
//创建URL变量HTML
function createVarHtml() {
varHtml = '<tr>'
+ '<td><select class="select2" onchange="regChannelVal(this, \'varName\');"><option value="">@参考</option><option value="category_id">类别ID</option><option value="page">分页页码</option></select>'
+ '<input type="text" name="varName" class="txtInput small ime-disabled" /></td>'
+ '<td><select class="select2" onchange="regChannelVal(this, \'varExp\');"><option value="">@参考</option><option value="(\\w+)">字符串</option><option value="(\\d+)">数字</option></select>'
+ '<input type="text" name="varExp" class="txtInput small ime-disabled" style="width:160px;" /></td>'
+ '<td><img alt="删除" src="../images/icon_del.gif" class="operator" onclick="delVarTr(this);" /></td>'
+'</tr>'
return varHtml;
} //添加一行变量
function addVarTr() {
varHtml = createVarHtml();
$("#var_box").append(varHtml);
}
//删除一行变量
function delVarTr(obj) {
$(obj).parent().parent().remove();
} //赋值参考选项
function regChannelVal(obj, objName) {
var value = $(obj).children("option:selected").attr("value");
if (value != "") {
$(obj).next("input[name='" + objName + "']").val(value);
}
} //赋值表单
function setChannelDialog(obj) {
var pobj = $(obj).parent().parent();
var item_type = $(pobj).find("input[name='item_type']").val();
$("#pageType option").each(function (i) {
if ($(this).attr("value") == item_type) {
$(this).attr("selected", "selected");
}
});
$("#urlKey").val($(pobj).find("input[name='item_name']").val());
$("#urlExp").val($(pobj).find("input[name='item_path']").val());
$("#pageTemplet").val($(pobj).find("input[name='item_templet']").val().replace(".html", ""));
$("#urlPage").val($(pobj).find("input[name='item_page']").val().replace(".aspx", ""));
//分析正则表达式
var strPath = $(pobj).find("input[name='item_path']").val().replace(new RegExp("{\\d+}", "g"), "(.*)"); //替换成正则表达式
var strPattern = $(pobj).find("input[name='item_pattern']").val();
var pathArr = strPattern.match(strPath);
//开始赋值
if ($(pobj).find("input[name='item_querystring']").val() != "") {
var querystrArr = $(pobj).find("input[name='item_querystring']").val().split("^");
for (i = ; i < querystrArr.length; i++) {
//插入一行TR并赋值变量
var trObj = $("#var_box").append(createVarHtml());
var strArr = querystrArr[i].split("=");
$(trObj).children("tr").eq(i).find("input[name='varName']").val(strArr[]);
//赋值正则表达式
$(trObj).children("tr").eq(i).find("input[name='varExp']").val(pathArr[i + ]);
}
}
} //最终赋值结果
function setNavRow(obj) {
$(obj).find("input[name='item_type']").val($("#pageType").children("option:selected").attr("value"));
$(obj).find(".item_type").html($("#pageType").children("option:selected").html());
$(obj).find("input[name='item_name']").val($("#urlKey").val());
$(obj).find("input[name='item_path']").val($("#urlExp").val());
//查找变量表达式
var patternStr = $("#urlExp").val();
var querystringStr = "";
$("#var_box tr").each(function (i) {
if ($(this).find("input[name='varName']").val() != "" && $(this).find("input[name='varExp']").val() != "") {
patternStr = patternStr.replace("{" + i + "}", $(this).find("input[name='varExp']").val());
querystringStr += $(this).find("input[name='varName']").val() + "=$" + (i + );
if (i < $("#var_box tr").length - ) {
querystringStr += "^";
}
}
});
$(obj).find("input[name='item_pattern']").val(patternStr);
$(obj).find("input[name='item_querystring']").val(querystringStr);
$(obj).find("input[name='item_templet']").val($("#pageTemplet").val() + ".html");
$(obj).find("input[name='item_page']").val($("#urlPage").val() + ".aspx");
} //检查Dialog输入情况
function execChannelDialog(m, obj) {
var oldkey = "";
var objNum = arguments.length;
if (objNum > ) {
oldkey = $(obj).parent().parent().find("input[name='item_name']").val();
}
if ($("#pageType").children("option:selected").attr("value") == "") {
$.ligerDialog.warn('请选择频道类型！', function () {
$("#pageType").focus();
});
return false;
}
if ($("#urlKey").val() == "") {
$.ligerDialog.warn('请输入URL名称(Key)！', function () {
$("#urlKey").focus();
});
return false;
}
if ($("#urlExp").val() == "") {
$.ligerDialog.warn('请输入URL的重写表达式！', function () {
$("#urlExp").focus();
});
return false;
}
if ($("#pageTemplet").val() == "") {
$.ligerDialog.warn('请输入模板文件的名称！', function () {
$("#pageTemplet").focus();
});
return false;
}
if ($("#urlPage").val() == "") {
$.ligerDialog.warn('请输入生成ASPX文件的名称！', function () {
$("#urlPage").focus();
});
return false;
}
//检查本地是否重复
var checkKey = true;
$("#item_box tr").each(function (i) {
if ($("#urlKey").val() == $(this).find("input[name='item_name']").val() && $("#urlKey").val() != oldkey) {
checkKey = false;
}
});
if (!checkKey) {
$.ligerDialog.warn('对不起，URL名称(Key)已重复啦！', function(){
$("#urlKey").focus();
});
return false;
}
//AJAX验证
var oldItemKey = "";
if (objNum > ) {
if ($(obj).parent().parent().find("input[name='old_item_name']").length > ) {
oldItemKey = $(obj).parent().parent().find("input[name='old_item_name']").val();
}
}
$.ajax({
type: "post",
url: "../../tools/admin_ajax.ashx?action=sys_urlrewrite_validate",
data: {
rewritekey: function () {
return $("#urlKey").val();
},
oldkey: function () {
return oldItemKey;
}
},
dataType: "html",
success: function (data, textStatus) {
if (data == "true") {
if (objNum > ) {
setNavRow($(obj).parent().parent());
} else {
//创建TR
var navSize = $('#item_box tr').size();
$("#item_box").append(getTr());
initButton(navSize);
setNavRow($("#item_box tr").eq(navSize));
}
m.close();
} else {
$.ligerDialog.warn('对不起，AJAX检测URL名称(Key)已存在，若旧名称已更改，请保存后方可使用该名称！', function () {
$("#urlKey").focus();
});
return false;
}
}
});
}
</script>
</head>
<body class="mainbody">
<form id="form1" runat="server">
<div class="navigation"><a href="javascript:history.go(-1);" class="back">后退</a>首页 > 控制面板 > 系统频道</div>
<div id="navtips" class="navtips">
编辑频道信息需具备基本的正则表达式知识，注意URL配置的名称不要重复，以下正则表达式可供参考：<br />
约定参数：category_id为频道ID，page为分页页码；<br />
<a href="javascript:CloseTip('navtips');" class="close">关闭</a>
</div>
<div id="contentTab">
<ul class="tab_nav">
<li class="selected"><a onclick="tabs('#contentTab',0);" href="javascript:;">编辑频道信息</a></li>
</ul>
<div class="tab_con" style="display:block;">
<table class="form_table">
<col width="180px"><col>
<tbody>
<tr>
<th>频道名称：</th>
<td>
<asp:HiddenField ID="hidName" runat="server" Value="" />
<asp:TextBox ID="txtName" runat="server" CssClass="txtInput normal ime-disabled"></asp:TextBox><label>*只允许英文字母、下划线，不可重复</label></td>
</tr>
<tr>
<th>频道标题：</th>
<td><asp:TextBox ID="txtTitle" runat="server" CssClass="txtInput normal required" minlength="" maxlength=""></asp:TextBox><label>*</label></td>
</tr>
<tr>
<th>所属模型：</th>
<td><asp:DropDownList id="ddlModelId" CssClass="select2 required" runat="server"></asp:DropDownList><label>*更改模型请手动删除旧内容</label></td>
</tr>
<tr>
<th>排 序：</th>
<td><asp:TextBox ID="txtSortId" runat="server" CssClass="txtInput normal small required digits"></asp:TextBox><label>*</label></td>
</tr>
<tr>
<th>URL重写配置：</th>
<td><button id="itemAddButton" type="button" class="btnSelect"><span class="add">添 加</span></button></td>
</tr>
<tr>
<th></th>
<td>
<table border="" cellspacing="" cellpadding="" class="border_table" width="99%">
<thead>
<tr>
<th width="9%">类型</th>
<th width="15%">名称</th>
<th width="18%">URL重写</th>
<th width="18%">正则表达式</th>
<th width="18%">参数配置</th>
<th width="15%">模板文件</th>
<th width="5%">操作</th>
</tr>
</thead>
<tbody id="item_box">
<asp:Repeater ID="rptList" runat="server">
<ItemTemplate>
<tr class="td_c">
<td>
<input type="hidden" name="item_type" value="<%#Eval("type")%>" />
<input type="hidden" name="item_page" value="<%#Eval("page")%>" />
<span class="item_type"><%#GetPageTypeName(Eval("type").ToString())%></span>
</td>
<td><input type="hidden" name="old_item_name" value="<%#Eval("name")%>" /><input name="item_name" type="text" value="<%#Eval("name")%>" class="txtInput small" style="width:98%;" readonly="readonly" /></td>
<td><input name="item_path" type="text" value="<%#Eval("path")%>" class="txtInput small3" style="width:98%;" readonly="readonly" /></td>
<td><input name="item_pattern" type="text" value="<%#Eval("pattern")%>" class="txtInput small3" style="width:98%;" readonly="readonly" /></td>
<td><input name="item_querystring" type="text" value="<%#Eval("querystring")%>" class="txtInput small3" style="width:98%;" readonly="readonly" /></td>
<td><input name="item_templet" type="text" value="<%#Eval("templet")%>" class="txtInput small" style="width:98%;" readonly="readonly" /></td>
<td><img alt="编辑" src="../images/icon_edit.gif" class="operator" /><img alt="删除" src="../images/icon_del.gif" class="operator" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</td>
</tr>
<tr>
<th></th>
<td><asp:Button ID="btnSubmit" runat="server" Text="提交保存" CssClass="btnSubmit" onclick="btnSubmit_Click" /></td>
</tr>
</tbody>
</table>
</div> </div>
</form>
</body>
</html>
Jquery动态添加多行，返回数据至每一行中的更多相关文章
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- 利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- C# DataGridView控件 动态添加新行
DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行, ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- C# DataGridView控件动态添加新行
C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如 ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
随机推荐
- 明天找python工作，看看这几道Python面试题吧，Python面试题No14
第1题: 如何解决验证码的问题,用什么模块,听过哪些人工打码平台? PIL.pytesser.tesseract模块 平台的话有:(打码平台特殊,不保证时效性) 云打码 挣码 斐斐打码 若快打码 超级 ...
- nexus私服的搭建和使用
- Uva1608
如果一个序列的所有子序列中均存在至少一个元素,这个元素在该子序列中只出现一次,则这个序列non-boring. 当一个序列[x,y]中没有元素只出现一次,那么该序列不符合要求,如果有的话,设为第i个元 ...
- VS文档自动生成
VS2008文档自动生成 (发现,Sandcastle主要是用于C#项目.里面的注释都是XML格式的.不太适合VC的.最终还是得用Doxygen) 一.Sandcastle简介: Sandcastle ...
- LeetCode 236 Lowest Common Ancestor of a Binary Tree 二叉树两个子节点的最低公共父节点
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...
- 基于php缓存的详解
nginx缓存 nginx有两种缓存机制:fastcgi_cache和proxy_cache 下面我们来说说这两种缓存机制的区别吧 proxy_cache作用是缓存后端服务器的内容,可能是任何内容,包 ...
- Ubuntu 14.04上安装Riak
一.安装riak 1. 安装包:riak_2.0.2-1_amd64.deb 路 径:~/software/riak_2.0.2-1_amd64.deb 2. 安装riak $ ...
- C 碎片九 预处理&位运算&文件操作
一.预处理 预处理语句:#开头的语句,在预处理阶段处理预处理语句.包括宏定义.文件包含处理.条件编译 1, 宏定义 1. 不带参数宏定义:#define 标识符 字符串 #define PI 3.1 ...
- Callback, Promise和Async/Await的对比
Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...
- npm warn weex @1.0.0 no repository field
玩weex出现nmp安装问题总是包这个错,但是其实是安装成功的 npm warn weex@1.0.0 no repository field. 看字面意思大概是package.json里缺少repo ...