ویرایش سطر با jquery
-
![مهران مهرنیا]()
مهران مهرنیا
- 94 ماه قبل
- 94 ماه قبل
- 276 نمایش
با سلام وخسته نباشید خدمت دوستان عزیزم ،
می خوام اطلاعات یک سطر رو با jquery ویرایش کنم چه طوری میشه این کارو کرد؟
بخشی از کد رو نوشتم یک modal باز میشه و اطلاعات رو می خونه میزاره توی text box ها
حالا چه جوری باید این تغیرات که توی text box ایجاد شده رو اعمال کنم توی جدول؟!
اینم عکس :
![با سلام وخسته نباشید خدمت دوستان عزیزم ،
می خوام اطلاعات یک سطر رو با jquery ویرایش کنم چه طوری میشه این کارو کرد؟
بخشی از کد رو نوشتم یک modal باز میشه و اطلاعات رو می خونه میزاره توی text box ها
حالا چه جوری باید این تغیرات که توی text box ایجاد شده رو اعمال کنم توی جدول؟!
اینم عکس :
||http://tosinso.com/files/get/a3bcb1d9-9f7d-49f6-b2a3-af33acc262f4||
<c#>
@model List<Sms.Core.Entity.Entities.LetterTemplate>
@{
ViewBag.Title = فهرست پیش نویس ها;
Layout = ~/Areas/Client/Views/Layouts/Master.cshtml;
ViewBag.PagePath = new string[] { مدیریت پیش نویس ها, ViewBag.Title };
}
<style type=text/css>
.tooltip-inner, .tooltip {
max-width: 350px;
white-space: normal;
}
/*@@media only screen and (max-width: 768px){
.table-responsive-horizontal-xs td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 40% !important;
white-space: normal;
text-align: right;
}
}*/
</style>
<script type=text/javascript>
$(function () {
$(#messageTotal).hide();
//start delete row in tabel and DataBase
$(a.del).click(function (event) {
event.preventDefault();
var id = $(this).closest('tr').data(id);
$(#delete-dialog).modal('show');
$(#delete-dialog input[name=id]).val(id);
console.log(id);
});
$(#delete-dialog button[type=submit]).click(function (event) {
//start loading button
var $this = $(this);
$this.button('loading');
setTimeout(function () {
$this.button('reset');
}, 2500);
//End loading button
//تگ a.del برای از بین بردن اثر لینک
event.preventDefault();
var id = $(this).closest('form').find(input[name=id]).val()
remove(id);
});
function remove(id) {
//call controler for delete row in database
$.post(/Client/LetterTemplate/Delete,
{
id: id
},
function (data) {
console.log(data);
if(data.Result==200){}
$(tr# + id).remove();
$(#messageTotal).show();
$(#message).html(data.Message);
$(#delete-dialog).modal('hide');
});
}
//End delete row in tabel and DataBase
//start Edit row in tabel
$(a.edit).click(function (event) {
event.preventDefault();
var Id = $(this).closest('tr').data(id);
var TittleDraft = $(this).closest('tr').data(title);
var JoinTextMessage = $(this).closest('tr').data(body);
console.log(TittleDraft);
//$(#TittleDraft).val(Title);
$(#JoinTextMessage).css(text-align, right);
//$(#DraftText).val(Body);
$(#create-dialog [name=Id]).val(Id);
$(#create-dialog [name=TittleDraft]).val(TittleDraft);
$(#create-dialog [name=JoinTextMessage]).val(JoinTextMessage);
$(#create-dialog).modal('show');
});
$(#create-dialog button[type=submit]).click(function (event) {
console.log(submit);
//start loading button
var $this = $(this);
$this.button('loading');
setTimeout(function () {
$this.button('reset');
}, 2500);
//End loading button
event.preventDefault();
var data = {};
data.Id = $(this).closest('form').find([name=Id]).val();;
data.TittleDraft = $(this).closest('form').find([name=TittleDraft]).val();;
data.JoinTextMessage = $(this).closest('form').find([name=JoinTextMessage]).val();;
Edit(data);
});
function Edit(data) {
console.log(Edit);
//call controler for Edit row in database
$.post(/Client/LetterTemplate/Create,data,
function (data) {
console.log(data);
if (data.Result == 200) {
$(tr# + data.Id).find(td.TittleDraft).html(data.TittleDraft);
$(tr# + data.Id).find(td.JoinTextMessage).html(data.JoinTextMessage);
}
//$(tr# + id).remove();
//$(#messageTotal).show();
//$(#message).html(data.Message);
//$(#create-dialog).modal('hide');
});
}
//End Edit row in tabel
//start add Row to tabel
$(a.add).click(function (event) {
event.preventDefault();
$(#Add-dialog).modal('show');
$(#TittleDraft).val( );
TittleDraft=$(#TittleDraft).val();
DraftText = $(#DraftText).val();
$(#DraftText).css(text-align,right);
});
//End add Row to tabel
});
</script>
<section class=content>
<div class=row>
<div class=col-xs-8 col-centered style=width:100%>
<div class=box box-info>
<div class=box-header>
<h3 class=box-title>@ViewBag.Title</h3>
</div>
<div class=box-body clearfix table-responsive-horizontal-xs>
@Html.Partial(/Areas/Client/Views/Layouts/MessageBox.cshtml)
<div id=messageTotal class= alert alert-xs alert-success alert-dismissable>
<i class=fa fa-success></i>
<button type=button class=close data-dismiss=alert aria-hidden=true>×</button>
<div id=message style=display:inline;></div>
</div>
@*<div class=alert alert-xs alert-success alert-dismissable>
<i class=fa fa-success></i>
<button type=button class=close data-dismiss=alert aria-hidden=true>×</button>
پیش نویس مورد نظر با موفقیت درج شد.
</div>*@
<div class=col-xs-12 clearfix>
<a href=/Client/LetterTemplate/Create class=btn btn-primary add data-target=#create-dialog>اضافه کردن پیش نویس جدید </a>
<br /><br />
@*<a class=btn btn-primary href=/client/group/index>فرخوانی مجدد</a>*@
</div>
<div class=col-xs-12 clearfix>
@if (Model == null || Model.Count == 0)
{
@Html.Partial(/Areas/Client/Views/Layouts/EmptyBox.cshtml)
}
else
{
<table class=table table-bordered table-striped>
<thead>
<tr>
@*<td class=text-center style=text-align: right;width:1px;>شناسه</td>*@
<td class=text-center style=text-align: right;width:440px !important;>عنوان پیش نویس</td>
<td class=text-center style=text-align: right;white-space:pre-line !important;>متن پیامک پیش نویس </td>
<td class=text-center style=text-align: center;width:90px;>عملیات</td>
</tr>
</thead>
<tbody>
@foreach (var r in Model)
{
if (r != null)
{
// public string Body { get; set; }
//public byte? Kind { get; set; }
//public int LTId { get; set; }
//public int? LtUserId { get; set; }
//public int? Parent { get; set; }
//public byte? Stat { get; set; }
//public string Title { get; set; }
<tr id=@r.LTId data-id=@r.LTId data-title=@r.Title data-body=@r.Body>
@*<td data-title=شناسه class=number data-toggle=tooltip title=@r.Body data-container=body>
@r.LTId
</td>*@
<td data-title=عنوان پیش نویس class=td-overflow TittleDraft data-toggle=tooltip title=@r.Title data-container=body>
@r.Title
</td>
<td data-title=متن پیش نویس class=JoinTextMessage td-overflow data-toggle=tooltip title=@r.Body data-container=body>
@r.Body
</td>
<td data-title=عملیات class= style=text-align:center;>
<a class=btn btn-xs btn-danger ttip del data-toggle=tooltip data-original-title=حذف پیش نویس data-target=#delete-dialog href=/Client/LetterTemplate/Delete?id=@r.LTId><i class=fa fa-times></i></a>
<a class=btn btn-xs btn-primary edit data-toggle=tooltip data-original-title=ویرایش پیش نویس data-target=#create-dialog href=/Client/LetterTemplate/Create?id=@r.LTId><i class=fa fa-edit></i></a>
@*<a class=btn btn-xs btn-success ttip href=/Client/Message/SendSimple?template=@r.Body data-toggle=tooltip data-original-title=ارسال پیام target=_blank><i class=fa fa-envelope></i></a>*@
</td>
</tr>
}
}
</tbody>
</table>
}
</div>
</div>
</div>
</div>
</div>
<!-- Delete Dialog ========================================================================================================-->
<div class=modal fade id=delete-dialog tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
<form action=/ method=post id=>
<input name=id type=hidden />
<div class=modal-dialog modal-sm>
<div class=box box-info modal-content>
<div class=box-header>
<div class=box-tools pull-left>
<button class=btn btn-default btn-sm data-dismiss=modal aria-label=Close><i class=fa fa-times></i></button>
</div>
<h3 class=box-title>حذف پیش نویس</h3>
</div>
<div class=box-body text-center clearfix>
<span class=message></span>
<h4>آیا مطمن هستید؟</h4>
</div>
<div class=box-footer text-center clearfix>
<button type=submit class=btn btn-danger btn-confirm data-id=delete data-delete=>بله</button>
<button type=button class=btn btn-success btn-confirm data-dismiss=modal aria-label=Close>خیر</button>
</div>
<div class=overlay style=display: none></div>
<div class=loading-img style=display: none></div>
</div>
</div>
</form>
</div>
</section>
<!-- Create Dialog ===========================================================================================================-->
<div class=modal fade id=create-dialog tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
<div class=modal-dialog >
<div class=box box-info modal-content>
<div class=box-header>
<div class=box-tools pull-left>
<button class=btn btn-default btn-sm data-dismiss=modal aria-label=Close><i class=fa fa-times></i></button>
</div>
<h3 class=box-title>ویرایش پیش نویس ها </h3>
</div>
<form role=form method=post action=/ novalidate=novalidate>
<input type=hidden value=0 name=Id />
<div class=box-body clearfix>
<div class=message></div>
<div class=row>
<div class=form-group col-xs-12>
<label>عنوان پیش نویس </label>
<input type=text placeholder=عنوان پیش نویس خود را وارد کنید. name=TittleDraft id=TittleDraft class=form-control />
</div>
</div>
<div class=row>
<div class=col-xs-12>
<div class=form-group>
<label> متن پیامک پیش نویس</label>
<textarea rows=4 placeholder= class=form-control ltr id=JoinTextMessage name=JoinTextMessage></textarea>
</div>
</div>
</div>
</div>
<div class=box-footer clearfix>
<button type=submit class=btn btn-success accept pull-left>ثبت اطلاعات</button>
</div>
</form>
<div class=overlay style=display: none></div>
<div class=loading-img style=display: none></div>
</div>
</div>
</div>
<!-- Add Dialog ===========================================================================================================-->
<div class=modal fade id=Add-dialog tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
<div class=modal-dialog >
<div class=box box-info modal-content>
<div class=box-header>
<div class=box-tools pull-left>
<button class=btn btn-default btn-sm data-dismiss=modal aria-label=Close><i class=fa fa-times></i></button>
</div>
<h3 class=box-title>افزودن پیش نویس </h3>
</div>
<form role=form method=post action=/ novalidate=novalidate>
<input type=hidden value=0 name=GroupId />
<div class=box-body clearfix>
<div class=message></div>
<div class=row>
<div class=form-group col-xs-12>
<label>عنوان پیش نویس </label>
<input type=text placeholder=عنوان پیش نویس خود را وارد کنید. name=TittleDraft id=TittleDraft class=form-control />
</div>
</div>
<div class=row>
<div class=col-xs-12>
<div class=form-group>
<label> متن پیامک پیش نویس</label>
<textarea rows=4 placeholder= class=form-control ltr id=DraftText name=DraftText></textarea>
</div>
</div>
</div>
</div>
<div class=box-footer clearfix>
<button type=submit class=btn btn-success accept pull-left>ثبت اطلاعات</button>
</div>
</form>
<div class=overlay style=display: none></div>
<div class=loading-img style=display: none></div>
</div>
</div>
</div>
<c#>](/images/image-loader.gif)
@model List<Sms.Core.Entity.Entities.LetterTemplate>
@{
ViewBag.Title = "فهرست پیش نویس ها";
Layout = "~/Areas/Client/Views/Layouts/Master.cshtml";
ViewBag.PagePath = new string[] { "مدیریت پیش نویس ها", ViewBag.Title };
}
<style type="text/css">
.tooltip-inner, .tooltip {
max-width: 350px;
white-space: normal;
}
/*@@media only screen and (max-width: 768px){
.table-responsive-horizontal-xs td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 40% !important;
white-space: normal;
text-align: right;
}
}*/
</style>
<script type="text/javascript">
$(function () {
$("#messageTotal").hide();
//start delete row in tabel and DataBase
$("a.del").click(function (event) {
event.preventDefault();
var id = $(this).closest('tr').data("id");
$("#delete-dialog").modal('show');
$("#delete-dialog input[name=id]").val(id);
console.log(id);
});
$("#delete-dialog button[type=submit]").click(function (event) {
//start loading button
var $this = $(this);
$this.button('loading');
setTimeout(function () {
$this.button('reset');
}, 2500);
//End loading button
//تگ a.del برای از بین بردن اثر لینک
event.preventDefault();
var id = $(this).closest('form').find("input[name=id]").val()
remove(id);
});
function remove(id) {
//call controler for delete row in database
$.post("/Client/LetterTemplate/Delete",
{
id: id
},
function (data) {
console.log(data);
if(data.Result==200){}
$("tr#" + id).remove();
$("#messageTotal").show();
$("#message").html(data.Message);
$("#delete-dialog").modal('hide');
});
}
//End delete row in tabel and DataBase
//start Edit row in tabel
$("a.edit").click(function (event) {
event.preventDefault();
var Id = $(this).closest('tr').data("id");
var TittleDraft = $(this).closest('tr').data("title");
var JoinTextMessage = $(this).closest('tr').data("body");
console.log(TittleDraft);
//$("#TittleDraft").val(Title);
$("#JoinTextMessage").css("text-align", "right");
//$("#DraftText").val(Body);
$("#create-dialog [name=Id]").val(Id);
$("#create-dialog [name=TittleDraft]").val(TittleDraft);
$("#create-dialog [name=JoinTextMessage]").val(JoinTextMessage);
$("#create-dialog").modal('show');
});
$("#create-dialog button[type=submit]").click(function (event) {
console.log("submit");
//start loading button
var $this = $(this);
$this.button('loading');
setTimeout(function () {
$this.button('reset');
}, 2500);
//End loading button
event.preventDefault();
var data = {};
data.Id = $(this).closest('form').find("[name=Id]").val();;
data.TittleDraft = $(this).closest('form').find("[name=TittleDraft]").val();;
data.JoinTextMessage = $(this).closest('form').find("[name=JoinTextMessage]").val();;
Edit(data);
});
function Edit(data) {
console.log("Edit");
//call controler for Edit row in database
$.post("/Client/LetterTemplate/Create",data,
function (data) {
console.log(data);
if (data.Result == 200) {
$("tr#" + data.Id).find("td.TittleDraft").html(data.TittleDraft);
$("tr#" + data.Id).find("td.JoinTextMessage").html(data.JoinTextMessage);
}
//$("tr#" + id).remove();
//$("#messageTotal").show();
//$("#message").html(data.Message);
//$("#create-dialog").modal('hide');
});
}
//End Edit row in tabel
//start add Row to tabel
$("a.add").click(function (event) {
event.preventDefault();
$("#Add-dialog").modal('show');
$("#TittleDraft").val(" ");
TittleDraft=$("#TittleDraft").val();
DraftText = $("#DraftText").val();
$("#DraftText").css("text-align","right");
});
//End add Row to tabel
});
</script>
<section class="content">
<div class="row">
<div class="col-xs-8 col-centered" style="width:100%">
<div class="box box-info">
<div class="box-header">
<h3 class="box-title">@ViewBag.Title</h3>
</div>
<div class="box-body clearfix table-responsive-horizontal-xs">
@Html.Partial("/Areas/Client/Views/Layouts/MessageBox.cshtml")
<div id="messageTotal" class=" alert alert-xs alert-success alert-dismissable">
<i class="fa fa-success"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div id="message" style="display:inline;"></div>
</div>
@*<div class="alert alert-xs alert-success alert-dismissable">
<i class="fa fa-success"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
پیش نویس مورد نظر با موفقیت درج شد.
</div>*@
<div class="col-xs-12 clearfix">
<a href="/Client/LetterTemplate/Create" class="btn btn-primary add" data-target="#create-dialog">اضافه کردن پیش نویس جدید </a>
<br /><br />
@*<a class="btn btn-primary" href="/client/group/index">فرخوانی مجدد</a>*@
</div>
<div class="col-xs-12 clearfix">
@if (Model == null || Model.Count == 0)
{
@Html.Partial("/Areas/Client/Views/Layouts/EmptyBox.cshtml")
}
else
{
<table class="table table-bordered table-striped">
<thead>
<tr>
@*<td class="text-center" style="text-align: right;width:1px;">شناسه</td>*@
<td class="text-center" style="text-align: right;width:440px !important;">عنوان پیش نویس</td>
<td class="text-center" style="text-align: right;white-space:pre-line !important;">متن پیامک پیش نویس </td>
<td class="text-center" style="text-align: center;width:90px;">عملیات</td>
</tr>
</thead>
<tbody>
@foreach (var r in Model)
{
if (r != null)
{
// public string Body { get; set; }
//public byte? Kind { get; set; }
//public int LTId { get; set; }
//public int? LtUserId { get; set; }
//public int? Parent { get; set; }
//public byte? Stat { get; set; }
//public string Title { get; set; }
<tr id="@r.LTId" data-id="@r.LTId" data-title="@r.Title" data-body="@r.Body">
@*<td data-title="شناسه" class="number" data-toggle="tooltip" title="@r.Body" data-container="body">
@r.LTId
</td>*@
<td data-title="عنوان پیش نویس" class="td-overflow TittleDraft" data-toggle="tooltip" title="@r.Title" data-container="body">
@r.Title
</td>
<td data-title="متن پیش نویس " class="JoinTextMessage td-overflow" data-toggle="tooltip" title="@r.Body" data-container="body">
@r.Body
</td>
<td data-title="عملیات" class="" style="text-align:center;">
<a class="btn btn-xs btn-danger ttip del" data-toggle="tooltip" data-original-title="حذف پیش نویس" data-target="#delete-dialog" href="/Client/LetterTemplate/Delete?id=@r.LTId"><i class="fa fa-times"></i></a>
<a class="btn btn-xs btn-primary edit" data-toggle="tooltip" data-original-title="ویرایش پیش نویس" data-target="#create-dialog" href="/Client/LetterTemplate/Create?id=@r.LTId"><i class="fa fa-edit"></i></a>
@*<a class="btn btn-xs btn-success ttip" href="/Client/Message/SendSimple?template=@r.Body" data-toggle="tooltip" data-original-title="ارسال پیام" target="_blank"><i class="fa fa-envelope"></i></a>*@
</td>
</tr>
}
}
</tbody>
</table>
}
</div>
</div>
</div>
</div>
</div>
<!-- Delete Dialog ========================================================================================================-->
<div class="modal fade" id="delete-dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/" method="post" id="">
<input name="id" type="hidden" />
<div class="modal-dialog modal-sm">
<div class="box box-info modal-content">
<div class="box-header">
<div class="box-tools pull-left">
<button class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
</div>
<h3 class="box-title">حذف پیش نویس</h3>
</div>
<div class="box-body text-center clearfix">
<span class="message"></span>
<h4>آیا مطمن هستید؟</h4>
</div>
<div class="box-footer text-center clearfix">
<button type="submit" class="btn btn-danger btn-confirm" data-id="delete" data-delete="">بله</button>
<button type="button" class="btn btn-success btn-confirm" data-dismiss="modal" aria-label="Close">خیر</button>
</div>
<div class="overlay" style="display: none"></div>
<div class="loading-img" style="display: none"></div>
</div>
</div>
</form>
</div>
</section>
<!-- Create Dialog ===========================================================================================================-->
<div class="modal fade" id="create-dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="box box-info modal-content">
<div class="box-header">
<div class="box-tools pull-left">
<button class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
</div>
<h3 class="box-title">ویرایش پیش نویس ها </h3>
</div>
<form role="form" method="post" action="/" novalidate="novalidate">
<input type="hidden" value="0" name="Id" />
<div class="box-body clearfix">
<div class="message"></div>
<div class="row">
<div class="form-group col-xs-12">
<label>عنوان پیش نویس </label>
<input type="text" placeholder="عنوان پیش نویس خود را وارد کنید." name="TittleDraft" id="TittleDraft" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label> متن پیامک پیش نویس</label>
<textarea rows="4" placeholder="" class="form-control ltr" id="JoinTextMessage" name="JoinTextMessage"></textarea>
</div>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="submit" class="btn btn-success accept pull-left">ثبت اطلاعات</button>
</div>
</form>
<div class="overlay" style="display: none"></div>
<div class="loading-img" style="display: none"></div>
</div>
</div>
</div>
<!-- Add Dialog ===========================================================================================================-->
<div class="modal fade" id="Add-dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="box box-info modal-content">
<div class="box-header">
<div class="box-tools pull-left">
<button class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
</div>
<h3 class="box-title">افزودن پیش نویس </h3>
</div>
<form role="form" method="post" action="/" novalidate="novalidate">
<input type="hidden" value="0" name="GroupId" />
<div class="box-body clearfix">
<div class="message"></div>
<div class="row">
<div class="form-group col-xs-12">
<label>عنوان پیش نویس </label>
<input type="text" placeholder="عنوان پیش نویس خود را وارد کنید." name="TittleDraft" id="TittleDraft" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label> متن پیامک پیش نویس</label>
<textarea rows="4" placeholder="" class="form-control ltr" id="DraftText" name="DraftText"></textarea>
</div>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="submit" class="btn btn-success accept pull-left">ثبت اطلاعات</button>
</div>
</form>
<div class="overlay" style="display: none"></div>
<div class="loading-img" style="display: none"></div>
</div>
</div>
</div>
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
پاسخ ها به این سوال
پست های وبلاگ
جدیدترین مقالات
سوالات محبوب
فعالترین سوالات