效果圖：
JS代碼：
//采購申請、紙箱采購查找要編輯的單元格，新增單價、歸屬客戶
function EditTdInputInfo(inserttype, pauseNo, orderLineNo, columnName, goodsPrice)
{
//紙箱規格類型
var zxtype;
if (inserttype == "CGC")
{
zxtype = $(".selectEditInput").val();
if ($("#txtCustomer").val() == "" || $("#txtCustomer").val() == undefined) {
alert('請先輸入歸屬客戶,以便于計算箱價格。'); return false;
}
else {
$(".selectEditInput").change(function () {
zxtype = $(this).val();
if (zxtype == "請選擇") { alert('請選擇規格類型。'); return false; }
else EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, zxtype, $("#txtCustomer").val(), goodsPrice);
});
}
}
//給這些單元格注冊滑鼠點選的事件
$(".editInput").click(function () {
//找到目前滑鼠點選的td,this對應的就是響應了click的那個td
var tdObj = $(this);
if (tdObj.children("input").length > 0) {
//目前td中input，不執行click處理
return false;
}
var text = tdObj.html();
//清空td中的内容
tdObj.html("");
//建立一個文本框
//去掉文本框的邊框
//設定文本框中的文字字型大小是12px
//使文本框的寬度和td的寬度相同
//設定文本框的背景色
//需要将目前td中的内容放到文本框中
//将文本框插入到td中
var inputObj = $("<input type='text'class='input-mini' />").val(text).appendTo(tdObj); //是文本框插入之後就被選中
inputObj.trigger("focus").trigger("select");
inputObj.click(function () {
return false;
});
//處理文本框上回車和esc按鍵的操作
inputObj.keyup(function (event) {
//擷取目前按下鍵盤的鍵值
var keycode = event.which;
//處理回車的情況
if (keycode == 13) {
if (zxtype == "請選擇") {
alert('請選擇規格類型。'); return false;
}
else {
//擷取當目前文本框中的内容
var inputtext = zxtype != "" ? zxtype : $(this).val();
//将td的内容修改成文本框中的内容
tdObj.html(inputtext);
EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, inputtext, $("#txtCustomer").val(), goodsPrice);
}
}
//處理esc的情況
if (keycode == 27) {
//将td中的内容還原成text
tdObj.html(text);
}
});
//滑鼠離開是儲存
inputObj.blur(function () {
if (zxtype == "請選擇") {
alert('請選擇規格類型。'); return false;
}
else {
//擷取當目前文本框中的内容
var inputtext = zxtype != "" ? zxtype : $(this).val();
//将td的内容修改成文本框中的内容
tdObj.html(inputtext);
EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, inputtext, $("#txtCustomer").val(), goodsPrice);
}
});
});zxtype = '';//清空紙箱規格類型
}
//共用編輯采購商品數量、備注等資訊
function EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, editInfo, theCustomer,goodsPrice) {
var titleType = ReturnAlertTitle(inserttype);
var insertInfo = '';
//判斷是否是紙箱采購
if (inserttype == "CGC") insertInfo = inserttype + "," + pauseNo + "," + orderLineNo + "," + columnName + ","
+ editInfo + "," + theCustomer + "," + goodsPrice;
else insertInfo=inserttype + "," + pauseNo + "," + orderLineNo + "," + columnName + "," + editInfo;
$.ajax({
type: "post",
url: "../../WorkFlowHandler.ashx",
data: "UpdateSelectGoodsLisInfo=" + encodeURIComponent(insertInfo) + "&currPage=1",
datatype: "html",
success: function (returnData, textstatus, xmlhttprequest) {
ShowSelectGoodsListHtml(inserttype, returnData);//采購、領用、調撥、紙箱采購
},
error: function (errorinfo) {
alert("擷取要更新的" + titleType+"商品清單資料請求錯誤。");
}
});
}
C# 代碼：
/// <summary>
/// 更新采購商品明細表中的數量和備注等資訊
/// </summary>
/// <param name="insertType">編輯類型</param>
/// <param name="pauseNo">采購單号</param>
/// <param name="orderLineNo">行号</param>
/// <param name="columnName">列名</param>
/// <param name="editInfo">編輯資訊</param>
public static void UpdateSelectGoodsListData(string insertType, string pauseNo,
string orderLineNo, string columnName, string editInfo, string theCustomer, string goodsPrice)
{
var aspx = ReturnPageName(insertType);
log4net.ILog log = log4net.LogManager.GetLogger(aspx);
var typeName = ReturnTypeName(insertType);
using (WHSMDataContext db = new WHSMDataContext())
{
try
{
ApprovePlanOrder_Details updateInfo = db.ApprovePlanOrder_Details.Single(x => x.approveID == pauseNo &&
x.orderLineNo == int.Parse(orderLineNo));
var upBoxSize = string.IsNullOrEmpty(Regex.Replace(updateInfo.goodsTitle, @"[\u4e00-\u9fa5]", "")) == true ?
"0*0*0" : Regex.Replace(updateInfo.goodsTitle, @"[\u4e00-\u9fa5]", "");
var upTitle = GetChineseWord(updateInfo.goodsTitle);
var splitUpBoxSize = upBoxSize.Split('*');
//（長+寬+4）*（寬+高+5）*單價*2/10000 紙箱采購價格計算公式
//迦南 （長+寬+8）
var cartonPrice = 0.0m;
//處理迦南 紙箱長
var customerCos = theCustomer.Contains("迦南") ? 8 : 4;
switch (columnName)
{
case "goodsBuyNo":
updateInfo.goodsBuyNo = int.Parse(editInfo);
break;
case "goodsNote":
updateInfo.goodsNote = editInfo;
break;
case "goodsPrice":
updateInfo.goodsPrice = Convert.ToDecimal(editInfo);
break;
case "L":
updateInfo.goodsTitle = upTitle+ editInfo +"*"+splitUpBoxSize[1] + "*" + splitUpBoxSize[2];
updateInfo.goodsSpec = editInfo + "*" + splitUpBoxSize[1] + "*" + splitUpBoxSize[2];
cartonPrice = (Convert.ToInt32(editInfo) + Convert.ToInt32(splitUpBoxSize[1]) + customerCos)
* (Convert.ToInt32(splitUpBoxSize[1]) + Convert.ToInt32(splitUpBoxSize[2]) + 5) * Convert.ToDecimal(goodsPrice) *2 / 10000;
updateInfo.goodsPrice = cartonPrice;
break;
case "W":
updateInfo.goodsTitle = upTitle + splitUpBoxSize[0] + "*" + editInfo + "*" + splitUpBoxSize[2];
updateInfo.goodsSpec = splitUpBoxSize[0] + "*" + editInfo + "*" + splitUpBoxSize[2];
cartonPrice = (Convert.ToInt32(splitUpBoxSize[0]) + Convert.ToInt32(editInfo) + customerCos)
* (Convert.ToInt32(editInfo) + Convert.ToInt32(splitUpBoxSize[2]) + 5) * Convert.ToDecimal(goodsPrice) * 2 / 10000;
updateInfo.goodsPrice = cartonPrice;
break;
case "H":
updateInfo.goodsTitle = upTitle + splitUpBoxSize[0] + "*" + splitUpBoxSize[1] + "*" + editInfo;
updateInfo.goodsSpec = splitUpBoxSize[0] + "*" + splitUpBoxSize[1] + "*" + editInfo;
cartonPrice =(Convert.ToInt32(splitUpBoxSize[0]) + Convert.ToInt32(splitUpBoxSize[1]) + customerCos)
*(Convert.ToInt32(splitUpBoxSize[1]) + Convert.ToInt32(editInfo) + 5) * Convert.ToDecimal(goodsPrice) * 2 / 10000;
updateInfo.goodsPrice = cartonPrice;
break;
case "zxtype":
updateInfo.zxtype = editInfo;
updateInfo.goodsTitle = editInfo + upBoxSize;
updateInfo.goodsSpec = splitUpBoxSize[0] + "*" + splitUpBoxSize[1] + "*" + splitUpBoxSize[2];
break;
}
log.Info(new LogContent(ShareApplyClass.GetIPAddress(), HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"],
aspx + "更新" + typeName + "商品資訊", "更新" + typeName + "單号:" + pauseNo + "下行号為" + orderLineNo + "的商品中資訊。"));
db.SubmitChanges();
}
catch (Exception ex)
{
log.Fatal(new LogContent(ShareApplyClass.GetIPAddress(), HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"],
aspx + "更新" + typeName + "商品資訊", ex.Message + ":" + ex.StackTrace));
}
}
}
/// <summary>
/// 正則擷取漢字
/// </summary>
/// <param name="oriText"></param>
/// <returns></returns>
public static string GetChineseWord(string oriText)
{
string x = //@"^[\u4e00-\u9fa5]+$";//比對字元串全部是中文字元
@"^[\u4e00-\u9fa5]+";//比對字元串中以中文字元結尾
MatchCollection Matches = Regex.Matches
(oriText, x, RegexOptions.IgnoreCase);
StringBuilder sb = new StringBuilder();
foreach (Match NextMatch in Matches)
{
sb.Append(NextMatch.Value);
}
return sb.ToString();
}
編輯時效果：
Jquery+ashx 輕按兩下bootstarp 中table 的td單元格進行編輯
編輯完成後效果：
Jquery+ashx 輕按兩下bootstarp 中table 的td單元格進行編輯
參考位址：
https://www.cnblogs.com/Leo_wl/p/3249872.html
http://www.php.cn/csharp-article-361297.html
http://www.cnblogs.com/songjl/p/7088356.html
http://www.cnblogs.com/Leo_wl/p/6699165.html
http://www.cnblogs.com/landeanfen/p/5821192.html
http://blog.csdn.net/qq_34905123/article/details/53609004
http://www.cnblogs.com/landeanfen/p/5005367.html
http://www.cnblogs.com/gamehiboy/p/5176618.html
http://www.cnblogs.com/superstar/p/5496528.html