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 ...
随机推荐
- Pycharm自动部署项目
Pycharm自动部署项目 大家好呀,又有几天不见各位了.断更了几天,给大家说声抱歉.清明节大家都挺忙的,有扫墓祭祖的,也有趁小长假去游玩的. 所以,在节后,更新也会照常进行,继续给大家分享本人的一些 ...
- JS实现自动轮播图效果（js案例）
现在很多网站都有轮播图,这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理,需要的小伙伴可以参考一下. 1.轮播图主要功能: 1. 图片自动轮播(主图切换同时下面导航图片也会跟着变化) 2. ...
- promise封装小程序的请求类（request，清爽易懂）
话不多说直接上代码,清爽易懂: import { config } from '../config.js' const tips = { 1:'抱歉出现了一个错误', 2:'网络错误', 1005:' ...
- 与Webpack最后的战斗
今天用自己搭的脚手架做react项目,终于还是在图片加载的地方出错了.决定好好地看一次最新的官网.顺带写个完整的教程.
- LeetCode初级算法(数组)解答
这里记录了LeetCode初级算法中数组的一些题目: 加一 本来想先转成整数,加1后再转回去:耽美想到测试的例子考虑到了这个方法的笨重,所以int类型超了最大范围65536,导致程序出错. class ...
- js：数组里面获取键名和键值
在写php时用ajax异步传回的返回数组时是json格式,在js里面处理时有时需要用到键名,此时可以用in来处理 js只有数字索引: <script> var data = new arr ...
- 11 Lists
1 Lists 1.1 定义并访问Lists List list = new List[].也可以使用泛型.访问list中的元素,可以使用list.get(i) or list[i]. ...
- LeetCode 101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center).For ex ...
- Unity UGUI按钮添加点击事件
1. 可视化创建及事件绑定 # 1 : 通过 Hierarchy 面板创建 UI > Button. 2 : 创建一个脚本 TestClick.cs, 定义了一个 Click 的 public ...
- jquery选择器大全参考
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...