bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言
bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋。但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一、零碎,JS、CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家。
表格封装了3个版本,接下来给大家展示一下样式和代码。
版本一
1. 样式
表格布局:
添加:添加一行新的空白代码
修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态。
2.代码
@using DatatableDemo.Models
@using ITOO.FreshNewReport.ViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Bootstrap 实例 - 表格
@*表格JS*@
@*动态添加表格*@
@*添加批量删除*@
$(document).ready(function () {
$("#btnDel").click(function () {
$(":checked").parent().parent().fadeOut("show"); //隐藏所有被选中的input元素
//parent() 获得当前匹配元素集合中每个元素的父元素,
})
$("tr").mousemove(function () {
$(this).css("background", "#F0F0F0"); //鼠标经过背景颜色变为灰色
})
$("tr").mouseout(function () {
$(this).css("background", "#fff"); //离开后背景颜色回复白色
})
//全选
$("#checkAll").click(function () {
if ($("#checkAll").attr("checked") == false) {
$("input[name='checkbox']").each(function () {
$(this).attr("checked", true);
});
} else {
$("input[name='checkbox']").each(function () {
$(this).attr("checked", false);
});
}
});
});
@*添加一行新表格数据*@
function append() {
var strAppend = '
';
$("#AddFamily tbody ").append(strAppend).editableTableWidget();
}
@*表格样式CSS*@
table {
border-collapse: collapse;
border: 1px solid #FFFFFF;
}
table td {
text-align: center;
height: 30px;
font-size: 12px;
line-height: 30px;
border: 1px solid #efecec;
}
@*添加批量删除*@
@*按钮*@
@*添加按钮*@
添加
@*修改按钮*@
修改
@*删除按钮---无弹出框*@
删除
@*表格*@
姓名称谓 年龄 政治面貌电话号码 工作单位家庭住址
@*从数据库读取的数据,遍历ViewModel里面的字段并赋值*@
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List)
{
@enStuFam.Name @enStuFam.RelationShip@enStuFam.Age@enStuFam.PoliticalStatus@enStuFam.TelNum @enStuFam.WorkUnit@enStuFam.Address
}
@*创建表格*@
//绑定编辑、回车事件
$(function () {
// $('#build').click(build);//实现创建表格
$('#btnEdit').click(edit);
$('#cells, #rows').keyup(function (e) {
if (e.keyCode === 13) {
//添加存入数据库的代码
}
});
});
//将表格转成可编辑的表格
function edit(index) {
// $('#table').editableTableWidget();--效果是单击编辑按钮后,所有的都可以编辑
// $(":checked").editableTableWidget();
$(":checked").parent().parent().editableTableWidget();//整行的可以编辑
}
//转成可编辑的表格
/*global $, window*/
$.fn.editableTableWidget = function (options) {
'use strict';
return $(this).each(function () {
var buildDefaultOptions = function () {
var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions);
opts.editor = opts.editor.clone();
return opts;
},
activeOptions = $.extend(buildDefaultOptions(), options),
ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,
element = $(this),
editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
active,
showEditor = function (select) {
active = element.find('td:focus');
if (active.length) {
editor.val(active.text())
.removeClass('error')
.show()
.offset(active.offset())
.css(active.css(activeOptions.cloneProperties))
.width(active.width())
.height(active.height())
.focus();
if (select) {
editor.select();
}
}
},
setActiveText = function () {
var text = editor.val(),
evt = $.Event('change'),
originalContent;
if (active.text() === text || editor.hasClass('error')) {
return true;
}
originalContent = active.html();
active.text(text).trigger(evt, text);
if (evt.result === false) {
active.html(originalContent);
}
},
movement = function (element, keycode) {
if (keycode === ARROW_RIGHT) {
return element.next('td');
} else if (keycode === ARROW_LEFT) {
return element.prev('td');
} else if (keycode === ARROW_UP) {
return element.parent().prev().children().eq(element.index());
} else if (keycode === ARROW_DOWN) {
return element.parent().next().children().eq(element.index());
}
return [];
};
editor.blur(function () {
setActiveText();
editor.hide();
}).keydown(function (e) {
if (e.which === ENTER) {
setActiveText();
editor.hide();
active.focus();
e.preventDefault();
e.stopPropagation();
} else if (e.which === ESC) {
editor.val(active.text());
e.preventDefault();
e.stopPropagation();
editor.hide();
active.focus();
} else if (e.which === TAB) {
active.focus();
} else if (this.selectionEnd - this.selectionStart === this.value.length) {
var possibleMove = movement(active, e.which);
if (possibleMove.length > 0) {
possibleMove.focus();
e.preventDefault();
e.stopPropagation();
}
}
})
.on('input paste', function () {
var evt = $.Event('validate');
active.trigger(evt, editor.val());
if (evt.result === false) {
editor.addClass('error');
} else {
editor.removeClass('error');
}
});
element.on('click keypress dblclick', showEditor)
.css('cursor', 'pointer')
.keydown(function (e) {
var prevent = true,
possibleMove = movement($(e.target), e.which);
if (possibleMove.length > 0) {
possibleMove.focus();
} else if (e.which === ENTER) {
showEditor(false);
} else if (e.which === 17 || e.which === 91 || e.which === 93) {
showEditor(true);
prevent = false;
} else {
prevent = false;
}
if (prevent) {
e.stopPropagation();
e.preventDefault();
}
});
element.find('td').prop('tabindex', 1);
$(window).on('resize', function () {
if (editor.is(':visible')) {
editor.offset(active.offset())
.width(active.width())
.height(active.height());
}
});
});
};
$.fn.editableTableWidget.defaultOptions = {
cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
'text-align', 'font', 'font-size', 'font-family', 'font-weight',
'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
editor: $('')
};
版本二
1. 样式
布局样式:
添加/修改:
2. 代码
@using ITOO.FreshNewReport.ViewModel
@{
Layout = null;
}
数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en - JS代码网
Editable DataTables
DataTable with SortingAdd row
@*
*@
姓名称谓 年龄 政治面貌电话号码 工作单位家庭住址
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List)
{
@*
*@@enStuFam.Name @enStuFam.RelationShip@enStuFam.Age@enStuFam.PoliticalStatus@enStuFam.TelNum @enStuFam.WorkUnit@enStuFam.Address
Edit
Delete
}
版本三
1.样式
卡片式表格:
添加/修改 弹出一个新页面:
2.代码
View代码:
@*按钮*@
@*添加按钮*@
添加
@*修改*@
修改
@*删除*@
@*
删除
*@
删除
开始日期结束日期毕业学校证明教师
@*
编 辑*@
Controller代码:
#region ShowEducation() 显示教育经历 王美 2015年6月5日
///
/// 显示教育经历
///
/// 教育经历Json
public JsonResult ShowEducation()
{
//创建WCF接口
IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService();
//从缓存中获取身份证号
string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID");
//调用WCF查询方法
List listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID);
//返回Json串
return Json(listEduInfo, JsonRequestBehavior.AllowGet);
}
#endregion
以上所述是小编给大家介绍的BootStrap实现带有增删改查功能的表格(DEMO详解),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
本文标题: BootStrap实现带有增删改查功能的表格(DEMO详解)
本文地址: http://www.cppcns.com/ruanjian/java/167820.html
bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)相关推荐
- bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- 基于localstorage实现增删改查功能
本文以英雄联盟英雄列表中英雄的增删改查为例,介绍localstorage的增删改查功能 该图显示了增差功能,由于我将图片和英雄名字设置为相同的,所以这里输入英雄名字(我将其命名为1~100的数字)图片 ...
- SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
前端页面的搭建 首先我们在resources包下新建一个文件夹static,SpringBoot默认会去把static包下的文件做一个路由 然后在static包下新建一个HTML File类型的文件, ...
- 使用EF框架实现MVC的增删改查功能!!!Entity Framework
一.什么是EF? ADO.NETEntity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.ADO.NET Entity Fram ...
- 使用三层架构实现简单的MVC登陆操作!并实现基本的增删改查功能!!
一丶使用三层架构创建一个简单的MVC登录操作 1.首先,创建一个项目以及BLL层.DAL层.Entity层,如图一: 图一 2.创建一个数据库如图二: 图二 3基本工作已做好,接下来就编BLL层.DA ...
- ext store 数据修改_Go 数据存储篇(一):基于内存存储实现数据增删改查功能...
在 Web 编程中,经常需要处理用户请求数据,而用户请求数据的处理往往又涉及到数据存储与获取,支持存储数据的媒介很多,包括内存.文件系统.数据库等,接下来,学院君将花几个篇幅的教程来系统介绍 Go W ...
- Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能,无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
最新文章
- 链表问题9——复制含有随机指针节点的链表(初阶)
- 仿站小工具8.0_安卓微信8.0版本可以升级了!新增4个实用功能,内附更新方式...
- NET中的异步编程(二)- 传统的异步编程
- android 短信时间排序,仿iphone中短信以及通话记录的时间显示
- 通过Xcode断点集成 reveal(2017-10-20更新)
- LinuxCNC基础知识
- aix查看oracle进程内存,Aix 查看进程占用内存大小(按从大小排列)
- 关于Toast 详解
- python基本代码教程-Python基础
- Libcurl的编译_HTTP/HTTPSclient源代码演示样例
- android提示“SIM not provisioned”
- 关于Intriguing properties of neural networks的理解
- iPhone支持杜比的机型
- 有关安装vuex报错error found vue@2.6.14及有关vue搭建项目问题
- 云服务器 宿主机,腾讯云专用宿主机CDH-独享云主机 独享物理服务器
- 俄罗斯品牌VOXTEL 520手机硬启动方法(恢复出厂)
- Dog Whisper--报告狗班长——狗的心理专家
- Android 打造形形色色的进度条 实现可以如此简单
- 全局过滤器/局部过滤器
- 王者荣耀 android 苹果,王者荣耀安卓怎么转移苹果_王者荣耀安卓怎么转移苹果步骤...
热门文章
- 如何自建微信外卖平台_外卖平台高抽成的背后,看小程序如何玩转餐饮外卖?...
- selenium点击元素位置_Selenium常见元素定位方法和操作
- java 返回页面_spring-mvc返回视图jsp页面及重定向
- win10子系统编译android,基于win10子系统ijkplayer全量编译(支持所有格式)流程
- 防蓝光膜真的能阻挡蓝光,减小辐射吗?
- C++重载操作符详解
- php input 只接收文件内容,一文搞懂$_POST和file_get_contents(“php://input”)的区别
- 文件的存取方式java_三种访问文件的方式
- 服务器装哪个操作系统好,服务器装哪个操作系统好
- transformers model inputs