BootStrap实现带有增删改查功能的表格(DEMO详解).pdf

发布时间：2022-05-29 发布人：admin 分类：说明书资料大小：0.16M 资料格式：pdf 举报版权申诉

weixin_38589316-12791763-4744300845244144321.pdf-第1页.png

第1页 / 共6页

weixin_38589316-12791763-4744300845244144321.pdf-第2页.png

第2页 / 共6页

weixin_38589316-12791763-4744300845244144321.pdf-第3页.png

第3页 / 共6页

weixin_38589316-12791763-4744300845244144321.pdf-第4页.png

第4页 / 共6页

weixin_38589316-12791763-4744300845244144321.pdf-第5页.png

第5页 / 共6页

weixin_38589316-12791763-4744300845244144321.pdf-第6页.png

第6页 / 共6页

文本预览

实现带有增删改查功能的表格(DEMO详解详解) BootStrap实现带有增删改查功能的表格主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧前言前言 bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS 也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。表格封装了3个版本，接下来给大家展示一下样式和代码。版本一版本一 1. 样式样式表格布局：添加：添加一行新的空白代码修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。 2.代码代码 @using DatatableDemo.Models @using ITOO.FreshNewReport.ViewModel @{ Layout = "~/Views/Shared/_Layout.cshtml"; } Bootstrap 实例 - 表格 @*表格JS*@ @*动态添加表格*@ @*添加批量删除*@

@*添加一行新表格数据*@ @*表格样式CSS*@ @*添加批量删除*@ @*按钮*@

@*添加按钮*@ @*修改按钮*@ @*删除按钮---无弹出框*@

@*表格*@

@*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@ @foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List) { }

	姓名	称谓	年龄	政治面貌	电话号码	工作单位	家庭住址
	@enStuFam.Name	@enStuFam.RelationShip	@enStuFam.Age	@enStuFam.PoliticalStatus	@enStuFam.TelNum	@enStuFam.WorkUnit	@enStuFam.Address

@*创建表格*@ 版本二版本二 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详解).pdf

相关推荐

开发技术

热门标签

最新资料