基于jQuery表单快速录入数据功能
一、功能介绍：安全依靠jQuery，表单table新增行（按键盘tab增一行，按esc删一行），也可以加一个新增行按钮点击新增多行，这里就不多说了~~
二、该功能主要实现技术：
1，总体.NET MVC，2，前台：bootstrap，jQuery，3，后台：EF框架。
三、代码展示
1、HTML代码：
@model MSModel.Menus
<table id="tbCate" class="table invoice-table"> <thead> <tr> <th></th> <th>类型</th> <th>菜名</th> <th>价格</th> <th>单位</th> <th>备注</th> <th></th> </tr> </thead> <tbody> @for (var i = 0; i < Model.Menu.Count; i++) { <tr> <td>1</td> <td> @*@Html.DropDownList("selCateType0", ViewBag.MenuList as IEnumerable<SelectListItem>)*@ @*, new { @name = "selCateType" }*@ <select id="selCateType0"></select> @Html.TextBoxFor(c => c.Menu[i].Type, new { @type = "hidden" }) </td> <td> @Html.TextBoxFor(c => c.Menu[i].Name, new { @class = "form-control" }) </td> <td> @Html.TextBoxFor(c => c.Menu[i].Price, new { @class = "form-control", @type = "number" }) </td> <td>@Html.TextBoxFor(c => c.Menu[i].Unit, new { @class = "form-control" })</td> <td width="226"> @Html.TextAreaFor(c => c.Menu[i].Remark, new { @class = "form-control", @rows = "1", @cols = "16" }) </td> <td><a href="javascript:void(0)" class="navbar-link glyphicon glyphicon-remove"></a></td> </tr> } </tbody> </table>
2、JS代码：
<script type="text/javascript">
var keydwonc;
var temptr;
var temp;
$(function () {
temptr = $("#tbCate tbody").first().html(); //复制行 下面新增行用到
temp = $("#tbCate tbody").html();//保存渲染前的模板
//easyUI下拉绑定
$("#tbCate select").combobox({
width: 210, height: 34, editable: true,
url: '/Cates/GetCateListbyType',
valueField: 'Id', textField: 'Type',
mode: 'remote', hasDownArrow: false,//是否显示下拉箭头
onBeforeLoad: function (param) {
if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
var value = $(this).combobox('getValue');
if (value) {// 修改的时候才会出现q为空而value不为空
param.id = value;
return true;
}
return false;
}
}
});
$("#tbCate a").remove();//删除第一个删除按钮
$('#Menu_0__Price').val("");
//==============此处给第二行(新增行)赋的事件================
keydwonc = function (et) {
//按键盘tab新增一行
if (event.keyCode == 9) {
//$(et).unbind();//取消当前事件
var rowNo = $("#tbCate tbody tr").size();
var index = Number($("#tbCate tbody tr td").find('textarea').last().attr("name").match(/\d+/)[0]);
$(temptr).appendTo($("#tbCate tbody")).find("a").click(function () {
$(this).parent().parent().remove();//删除整行
}).parent().parent().find("select").last().combobox({
width: 210, height: 34, editable: true,
url: '/Cates/GetCateListbyType',
valueField: 'Id', textField: 'Type',
mode: 'remote', hasDownArrow: false,//是否显示下拉箭头
onBeforeLoad: function (param) {
if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
var value = $(this).combobox('getValue');
if (value) {// 修改的时候才会出现q为空而value不为空
param.id = value;
return true;
}
return false;
}
}
});//加载新行并渲染
$(et).parent().parent().nextAll().last().find("td:first").html(rowNo + 1);//新增行自增编号
//新行 属性改变
$(et).parent().parent().nextAll().last().find("input,select,textarea").each(function (i) {
$(this).val("");
//combobox 属性改变
var attid = $(this).attr("id");
var attname = $(this).attr("name");
var attcomboname = $(this).attr("comboname");
var newindex = index + 1;
if (attid)
$(this).attr("id", attid.replace(/\d+/, newindex));
if (attname)
$(this).attr("name", attname.replace(/\d+/, newindex));
if (attcomboname)
$(this).attr("comboname", attcomboname.replace(/\d+/, newindex));
if ($(this).attr("name") == "Menu[" + newindex + "].Remark") { $(this).attr("onkeydown", "keydwonc(this)");
}
})
} else if (event.keyCode == 27) { //按esc删一行
if ($('#tbCate tbody tr').size() > 1) {
$(et).parents('tr').remove();
//光标返回聚焦
$('#tbCate tbody tr').find('textarea').last().focus();
}
}
};
//================此处第一行事件==========================
var tr = $("#tbCate tbody tr");
tr.each(function () {
$(this).find('textarea').last().keydown(function (e) {
if (e.keyCode == 9) {
var rowNo = $("#tbCate tbody tr").size();
var index = Number($("#tbCate tbody tr td").find('textarea').last().attr("name").match(/\d+/)[0]);
//新增行，开始
$(temp).appendTo($("#tbCate tbody")).find("a").click(function () {
$(this).parent().parent().remove();//删除整行
}).parent().parent().find("select").combobox({
width: 210, height: 34, editable: true,
url: '/Cates/GetCateListbyType',
valueField: 'Id', textField: 'Type',
mode: 'remote', hasDownArrow: false,//是否显示下拉箭头
onBeforeLoad: function (param) {
if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
var value = $(this).combobox('getValue');
if (value) {// 修改的时候才会出现q为空而value不为空
param.id = value;
return true;
}
return false;
}
}
});//加载新行并渲染
$(this).parent().parent().nextAll().last().find("td:first").html(rowNo + 1);//新增行自增编号
//新增行 最后一行属性改变
$(this).parent().parent().nextAll().last().find("input,select,textarea").each(function (i) {
$(this).val("");
//combobox 属性改变
var attid = $(this).attr("id");
var attname = $(this).attr("name");
var attcomboname = $(this).attr("comboname");
var newindex = index + 1;
if (attid)
$(this).attr("id", attid.replace(/\d+/, newindex));
if (attname)
$(this).attr("name", attname.replace(/\d+/, newindex));
if (attcomboname)
$(this).attr("comboname", attcomboname.replace(/\d+/, newindex));
if ($(this).attr("name") == "Menu[" + newindex + "].Remark") {
$(this).attr("onkeydown", "keydwonc(this)");
}
})
}
});
});
});
</script>
四、效果图：
五、总结，本人写的jQuery按tab键新增行这套逻辑代码算是中规中矩的，可以说不是很简洁的，肯定还有地方要优化，欢迎有看到的园友来指正，哈哈。
能与大家共同学习进步是我最大的兴趣！！
版权声明：本文为winfeng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。