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

前言

bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。

表格封装了3个版本，接下来给大家展示一下样式和代码。

版本一

1. 样式

表格布局：

添加：添加一行新的空白代码

修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。

2.代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

@using DatatableDemo.Models

@using ITOO.FreshNewReport.ViewModel

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 表格</title>

<link href="../../BootStrap/StuPersonInfo/bootstrap.min.css" rel="stylesheet" />

<script src="../../BootStrap/StuPersonInfo/bootstrap.min.js"></script>

<script src="../../BootStrap/StuPersonInfo/jquery.min.js"></script>

@*表格JS*@

<link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />

<meta name="viewport" content="width=device-wdith,initia-scale=1.0">

@*动态添加表格*@

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="../../BootStrap/datagrid/css/bootstrap-table.min.css" rel="stylesheet" />

<link href="../../BootStrap/datagrid/css/bootstrap.min.css" rel="stylesheet" />

<script src="../../BootStrap/datagrid/js/jquery.min.js"></script>

<script src="../../BootStrap/datagrid/js/jquery.base64.js"></script>

<script src="../../BootStrap/datagrid/js/bootstrap-table.js"></script>

<script src="../../BootStrap/datagrid/js/bootstrap-table-export.js"></script>

@*添加批量删除*@

<meta charset="utf-8">

<script type="text/javascript" src="../../BootStrap/datagrid/js/jquery.min.js"></script>

<script type="text/javascript">

$(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);

});

}

});

</script>

@*添加一行新表格数据*@

<script>

function append() {

var strAppend = '<tr style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;"><td ><input type="checkbox" value="" editable="false" name="checkbox"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><tr>';

$("#AddFamily tbody ").append(strAppend).editableTableWidget();

}

</script>

@*表格样式CSS*@

<style>

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;

}

</style>

@*添加批量删除*@

<script src="../../JS/TableJs.js"></script>

</head>

<body>

<script src="../../BootStrap/FamilyJS.js"></script>

@*按钮*@

<div class="heading">

@*添加按钮*@

<button id="build" type="button" class="btn btn-success" data-toggle="modal" data-target="" onclick="append()">

<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加

</button>

@*修改按钮*@

<button id="btnEdit" type="button" class="btn btn-warning">

<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改

</button>

@*删除按钮---无弹出框*@

<button id="btnDel" type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteForm" onclick="">

<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除

</button>

</div>

@*表格*@

<div class="widget-content padded clearfix">

<table id="AddFamily" class="table table-bordered table-striped" width="1000px" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto">

<thead>

<th class="check-header hidden-xs">

<input id="checkAll" name="checkAll" type="checkbox">

<th>姓名</th>

<th>称谓 </th>

<th>年龄 </th>

<th>政治面貌</th>

<th>电话号码 </th>

<th>工作单位</th>

<th>家庭住址</th>

</thead>

<tbody id="mainbody">

@*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@

@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>)

{

<tr>

<td>

<input name="checkbox" type="checkbox" id="1">

</td>

<td data-field="Name">@enStuFam.Name </td>

<td data-field="RelationShip">@enStuFam.RelationShip</td>

<td data-field="Age">@enStuFam.Age</td>

<td>@enStuFam.PoliticalStatus</td>

<td>@enStuFam.TelNum </td>

<td>@enStuFam.WorkUnit</td>

<td>@enStuFam.Address </td>

</tr>

}

</tbody>

</table>

</div>

<link href="../../BootStrap/jquery.bdt.css" rel="stylesheet" />

@*创建表格*@

<script>

//绑定编辑、回车事件

$(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: $('<input>')

};

</script>

</body>

</html>

版本二

1. 样式

布局样式：

添加/修改：

2. 代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

@using ITOO.FreshNewReport.ViewModel

@{

Layout = null;

}

<html>

<head>

<title>数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en - JS代码网

</title>

<link href="../../BootStrap/se7ven/../../BootStrap/se7ven/stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/isotope.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/jquery.fancybox.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/fullcalendar.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/wizard.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/select2.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/morris.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/datatables.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/datepicker.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/timepicker.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/colorpicker.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/bootstrap-switch.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/daterange-picker.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/typeahead.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/summernote.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/pygments.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/style.css" media="all" rel="stylesheet" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/color/green.css" media="all" rel="alternate stylesheet" title="green-theme" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/color/orange.css" media="all" rel="alternate stylesheet" title="orange-theme" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/color/magenta.css" media="all" rel="alternate stylesheet" title="magenta-theme" type="text/css" />

<link href="../../BootStrap/se7ven/stylesheets/color/gray.css" media="all" rel="alternate stylesheet" title="gray-theme" type="text/css" />

<script src="../../BootStrap/se7ven/javascripts/jquery.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery-ui.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/bootstrap.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/raphael.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/selectivizr-min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.mousewheel.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.world.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/fullcalendar.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/gcal.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.dataTables.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/datatable-editable.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/excanvas.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.isotope.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/isotope_extras.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/modernizr.custom.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.fancybox.pack.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/select2.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/styleswitcher.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/wysiwyg.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/summernote.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.inputmask.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.validate.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/bootstrap-fileupload.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/bootstrap-datepicker.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/bootstrap-timepicker.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/bootstrap-colorpicker.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/bootstrap-switch.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/typeahead.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/daterange-picker.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/date.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/morris.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/skycons.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/fitvids.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/jquery.sparkline.min.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/main.js" type="text/javascript"></script>

<script src="../../BootStrap/se7ven/javascripts/respond.js" type="text/javascript"></script>

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

</head>

<body>

<div class="modal-shiftfix">

<div class="container-fluid main-content">

<div class="page-title">

<h1>Editable DataTables

</h1>

</div>

<div class="row">

<div class="col-lg-12">

<div class="widget-container fluid-height clearfix">

<div class="heading">

<i class="icon-table"></i>DataTable with Sorting<a class="btn btn-sm btn-primary-outline pull-right" href="#" id="add-row"><i class="icon-plus"></i>Add row</a>

</div>

<div class="widget-content padded clearfix">

<table class="table table-bordered table-striped" id="datatable-editable">

<thead>

@*<th class="check-header hidden-xs">

<input id="checkAll" name="checkAll" type="checkbox">*@

<th>姓名</th>

<th>称谓 </th>

<th>年龄 </th>

<th>政治面貌</th>

<th>电话号码 </th>

<th>工作单位</th>

<th class="hidden-xs">家庭住址</th>

<th width="60"></th>

<th width="75"></th>

</thead>

<tbody>

@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>)

{

<tr>

@*<td>

<input name="checkbox" type="checkbox" id="1">

</td>*@

<td>@enStuFam.Name </td>

<td>@enStuFam.RelationShip</td>

<td>@enStuFam.Age</td>

<td>@enStuFam.PoliticalStatus</td>

<td>@enStuFam.TelNum </td>

<td>@enStuFam.WorkUnit</td>

<td>@enStuFam.Address </td>

<td>

<a class="edit-row" href="#">Edit</a>

</td>

<td>

<a class="delete-row" href="#">Delete</a>

</td>

</tr>

}

</tbody>

</table>

</div>

</div>

</body>

</html>

版本三

1.样式

卡片式表格：

添加/修改弹出一个新页面：

2.代码

View代码：

<div class="container-fluid main-content">

<div class="row">

<div class="col-lg-12">

<div class="widget-container fluid-height clearfix">

@*按钮*@

<div class="heading">

@*添加按钮*@

<span class="ui-button">

<a class="btn btn-success glyphicon glyphicon-plus" href="../AddEduInfo/AddEduInfo">添加</a>

</span>

@*修改*@

<span class="ui-button">

<a class="btn btn-warning glyphicon glyphicon-edit" href="../AddEduInfo/AddEduInfo">修改</a>

</span>

@*删除*@

@* <span class="ui-button" data-target="#myModal" >

<a class="btn btn-danger glyphicon glyphicon-minus" >删除</a>

</span>*@

<span>

<button type="button" class="btn btn-danger glyphicon glyphicon-minus" data-toggle="modal" data-target="#myModal">

删除

</button>

</span>

</div>

<table id="events-table" style="font-size: 15px" class="table" data-toggle="table" data-card-view="true" data-url="/StuPersonInfo/ShowEducation">

<thead>

<tr class="info">

<th data-field="state" data-checkbox="true"></th>

<th data-field="StartDate" data-sortable="true">开始日期</th>

<th data-field="EndDate" data-sortable="true">结束日期</th>

<th data-field="SchoolName" data-sortable="true">毕业学校</th>

<th data-field="TeacherName" data-visible="true">证明教师</th>

@* <th data-field="" data-sortable="true" data-formatter="operateFormatter" data-events="operateEvents">编辑</th>*@

</tr>

</thead>

</table>

</div>

Controller代码：

#region ShowEducation() 显示教育经历王美 2015年6月5日

/// <summary>

/// 显示教育经历

/// </summary>

/// <returns>教育经历Json</returns>

public JsonResult ShowEducation()

{

//创建WCF接口

IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService();

//从缓存中获取身份证号

string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID");

//调用WCF查询方法

List<EduExperienceViewModel> listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID);

//返回Json串

return Json(listEduInfo, JsonRequestBehavior.AllowGet);

}

#endregion

以上所述是小编给大家介绍的BootStrap实现带有增删改查功能的表格(DEMO详解)，希望对大家有所帮助。

BootStrap实现带有增删改查功能的表格(DEMO详解)相关推荐

bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
使用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模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
molicode生成vue增删改查功能
2019独角兽企业重金招聘Python工程师标准>>> molicode生成vue增删改查功能背景描述当前生成的页面主要应用于VUE前端UI框架 iview: https://i ...
Android 中编写一个简易购物车，商品包括商品名称，单价，数量，可以对商品进行增删改查功能。（ArrayList，SQLite）
Android 中编写一个简易购物车,商品包括商品名称,单价,数量,可以对商品进行增删改查功能.(ArrayList,SQLite) 布局(activity_main.xml): <?xml v ...

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

BootStrap实现带有增删改查功能的表格(DEMO详解)相关推荐

最新文章

热门文章