GVKun编程网logo

Bootstrap 4文件输入（bootstrap-fileinput）

9

本文将带您了解关于Bootstrap4文件输入的新内容，同时我们还将为您解释bootstrap-fileinput的相关知识，另外，我们还将为您提供关于bootstrap+bootstrap-tabl

本文将带您了解关于Bootstrap 4文件输入的新内容，同时我们还将为您解释bootstrap-fileinput的相关知识，另外，我们还将为您提供关于bootstrap + bootstrap-table + jquery + bootstrap-paginator、Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结、Bootstrap vs Angular 2：多脚本加载器中的错误！找不到模块：错误：/〜/ bootstrap / did / js / bootstrap.js、bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify的实用信息。

本文目录一览：

Bootstrap 4文件输入（bootstrap-fileinput）

Bootstrap 4文件输入（bootstrap-fileinput）

我正在使用bootstrap 4文件浏览器。如果我使用自定义文件控件，则会一直看到“选择文件值”。

选择文件后，我想更改选择文件的值。此值实际上隐藏在CSS中.custom-file-control:lang(en)::after，我不知道如何在javascript中访问和更改它。我可以这样获得所选文件的值：

document.getElementById("exampleInputFile").value.split("\\").pop();

我不需要改变

.custom-file-control:lang(en)::after {    content: "Choose file...";}

答案1

小编典典

Bootstrap 4.4

显示选定的文件名也可以使用纯JavaScript完成。这是一个示例，假定带有标签的标准custom-file-input是输入的下一个兄弟元素…

document.querySelector(''.custom-file-input'').addEventListener(''change'',function(e){  var fileName = document.getElementById("myInput").files[0].name;  var nextSibling = e.target.nextElementSibling  nextSibling.innerText = fileName})

Bootstrap 4.1+

现在，在Bootstrap 4.1中，在以下位置设置了“选择文件…”占位符文本 custom-file-label ：

<divid="customFile" lang="es">        <input type="file"id="exampleInputFile" aria-describedby="fileHelp">        <labelfor="exampleInputFile">           Select file...        </label></div>

更改“浏览”按钮文本需要一些额外的CSS或SASS。还要注意使用属性进行语言翻译的方式lang=""。

.custom-file-input ~ .custom-file-label::after {    content: "Button Text";}

Bootstrap 4 Alpha 6 （原始答案）

我认为这里有2个独立的问题。

<labelid="customFile">        <input type="file">        <span></span></label>

1-如何更改初始占位符和按钮文本

在Bootstrap 4中，使用基于HTML语言的CSS伪元素在上设置初始占位符值。初始文件按钮（实际上不是按钮，但看起来像一个按钮）是使用CSS伪元素设置的。这些值可以用CSS覆盖。custom-file-control``::after``::before

#customFile .custom-file-control:lang(en)::after {  content: "Select file...";}#customFile .custom-file-control:lang(en)::before {  content: "Click me";}

2-如何获取选定的文件名值，并更新输入以显示该值。

一旦选择了文件，就可以使用JavaScript / jQuery获得该值。

$(''.custom-file-input'').on(''change'',function(){    var fileName = $(this).val();})

但是，由于输入的占位符文本是伪元素，因此没有简单的方法可以使用Js/jQuery进行操作。但是，您可以拥有另一个CSS类，一旦选择文件，该类就会
隐藏伪内容 …

.custom-file-control.selected:lang(en)::after {  content: "" !important;}

选择文件后，使用jQuery在.selected类上切换.custom-file-control。这将隐藏初始占位符值。然后将文件名值放入.form-control-file跨度…

$(''.custom-file-input'').on(''change'',function(){  var fileName = $(this).val();  $(this).next(''.form-control-file'').addClass("selected").html(fileName);})

然后，您可以根据需要处理文件上载或重新选择。

bootstrap + bootstrap-table + jquery + bootstrap-paginator

bootstrap + bootstrap-table + jquery + bootstrap-paginator

 

http://127.0.0.1:8848/pangBo/index.html

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		 crossorigin="anonymous"></script>
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="js/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div>
			<formrole="search">
				<div>
					<div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>客户姓名: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>手机号码: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
					</div>
					<div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
						<div>
							<label>客户编号: </label>
							<div>
								<input type="text"placeholder="">
							</div>
						</div>
					</div>
					<div>
						<button type="submit">查询</button>
					</div>
				</div>
			</form>
		</div>
		<div>
			<divrole="group" aria-label="...">
				<button type="button" id="btn-one">可撤单</button>
				<button type="button" id="btn-two">已撤单</button>
			</div>
		</div>
		<div id="table-one">
			<table id="table"></table>
			<div>
				<div id="example">
					<ul id="pageLimit"></ul>
				</div>
			</div>
		</div>
		<div id="table-two">
			<table id="table-ta-one"></table>
			<div>
				<div id="example-two">
					<ul id="pageLimit-two"></ul>
				</div>
			</div>
		</div>
		<divid="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div>
				<div>
					<div>
						<button type="button"data-dismiss="modal" aria-hidden="true">&times;</button>
						<divid="myModalLabel">请输入登录密码:</div>
					</div>
					<div>
						<div>
							<input id="input-text" type="text" value=""placeholder="">
						</div>
						<button type="button" id="btn-ok">确定撤单</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function operateFormatter(value, row, index) {
		return [
			''<button type="button"data-toggle="modal" data-target="#myModal">撤单</button>''
		].join('''');
	}
	window.operateEvents = {
		''click .RoleOfdelete'': function(e, value, row, index) {
			console.log(''kkk'');
		}
	};
	$(''#table'').bootstrapTable({
		url: '''', //请求后台的URL（*）
		method: ''GET'', //请求方式（*）
		// toolbar: ''#toolbar'', //工具按钮用哪个容器
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: false, //是否显示分页（*）
		// pageSize: 10, //每页的记录行数（*）
		// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
		// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		uniqueId: "id", //每一行的唯一标识，一般为主键列
		columns: [{
				field: ''id'',
				align: ''center'',
				title: ''交易合同号''
			},
			{
				field: ''ida'',
				align: ''center'',
				title: ''客户编号''
			},
			{
				field: ''idb'',
				align: ''center'',
				title: ''客户姓名''
			},
			{
				field: ''idc'',
				align: ''center'',
				title: ''手机号码''
			},
			{
				field: ''idd'',
				align: ''center'',
				title: ''证件号码''
			},
			{
				field: ''ide'',
				align: ''center'',
				title: ''产品代码''
			},
			{
				field: ''idf'',
				align: ''center'',
				title: ''产品名称''
			},
			{
				field: ''idg'',
				align: ''center'',
				title: ''购买金额''
			},
			{
				field: ''idh'',
				align: ''center'',
				title: ''交易时间''
			},
			{
				field: ''idi'',
				align: ''center'',
				title: ''撤单'',
				events: operateEvents,
				formatter: operateFormatter
			},
		],
		data: [{
				id: 1
			},
			{
				id: 1
			},
			{
				id: 1
			}
		],
		onLoadError: function() {
			showTips("数据加载失败！");
		},

	});
	$(''#table-ta-one'').bootstrapTable({
		url: '''', //请求后台的URL（*）
		method: ''GET'', //请求方式（*）
		// toolbar: ''#toolbar'', //工具按钮用哪个容器
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: false, //是否显示分页（*）
		// pageSize: 10, //每页的记录行数（*）
		// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
		// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		uniqueId: "id", //每一行的唯一标识，一般为主键列
		columns: [{
				field: ''id'',
				align: ''center'',
				title: ''交易合同号''
			},
			{
				field: ''ida'',
				align: ''center'',
				title: ''客户编号''
			},
			{
				field: ''idb'',
				align: ''center'',
				title: ''客户姓名''
			},
			{
				field: ''idc'',
				align: ''center'',
				title: ''手机号码''
			},
			{
				field: ''idd'',
				align: ''center'',
				title: ''证件号码''
			},
			{
				field: ''ide'',
				align: ''center'',
				title: ''产品代码''
			},
			{
				field: ''idf'',
				align: ''center'',
				title: ''产品名称''
			},
			{
				field: ''idg'',
				align: ''center'',
				title: ''购买金额''
			},
			{
				field: ''idh'',
				align: ''center'',
				title: ''交易时间''
			}
		],
		data: [{
				id: 1
			},
			{
				id: 1
			},
			{
				id: 1
			}
		],
		onLoadError: function() {
			showTips("数据加载失败！");
		},

	});
	$(''#btn-one'').click(function() {
		console.log(''kk'');
		$(''#table-one'').show();
		$(''#table-two'').hide();
		$(''#btn-one'').css({
			''background-color'': ''#e6e6e6''
		})
	})
	$(''#btn-two'').click(function() {
		console.log(''kkk'');
		$(''#table-two'').show();
		$(''#table-one'').hide();
		$(''#btn-one'').css({
			''background-color'': ''#FFF''
		})
	})
	$(''#pageLimit'').bootstrapPaginator({
		currentPage: 1, //当前的请求页面。
		totalPages: 100, //一共多少页。
		size: "normal", //应该是页眉的大小。
		bootstrapMajorVersion: 3, //bootstrap的版本要求。
		alignment: "right",
		numberOfPages: 5, //一页列出多少数据。
		itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
			switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
			}
		}
	});
	$(''#pageLimit-two'').bootstrapPaginator({
		currentPage: 1, //当前的请求页面。
		totalPages: 100, //一共多少页。
		size: "normal", //应该是页眉的大小。
		bootstrapMajorVersion: 3, //bootstrap的版本要求。
		alignment: "right",
		numberOfPages: 5, //一页列出多少数据。
		itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
			switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
			}
		}
	});
	$(''#btn-ok'').click(function() {
		var inputContent = $(''#input-text'').val();
		if (inputContent == '''') {
			alert(''密码不能为空 !'');
		}
		console.log(inputContent);
	})
</script>

 

Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

Bootstrap表格插件bootstrap-table配置与应用小结

 

by:授客 QQ：1033553122

  1. 1.   测试环境

win7

 

JQuery-3.2.1.min.js

下载地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

 

Bootstrap-3.3.7-dist

下载地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip

 

bootstrap-table-develop-v1.12.1.zip

下载地址：

https://github.com/wenzhixin/bootstrap-table

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-table-develop-v1.12.1.zip

 

  1. 2.   配置与应用

效果展示

 

HTML代码片段

head设置

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
{% load staticfiles %}
 
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="{% static  ''website/jquery-3.2.1.min.js'' %}" defer></script>
 
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{% static ''website/bootstrap-3.3.7-dist/css/bootstrap.min.css'' %}" />
 
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="{% static  ''website/bootstrap-3.3.7-dist/js/bootstrap.min.js'' %}" defer></script>
 
 
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" defer></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" defer></script>
<![endif]-->
 
<!-- Bootstrap-Table -->
<link rel="stylesheet" type="text/css" href="{% static ''website/bootstrap-table-1.12.1-dist/bootstrap-table.min.css'' %}" />
<script type="text/javascript" src="{% static  ''website/bootstrap-table-1.12.1-dist/bootstrap-table.min.js'' %}" defer></script>
<!-- 引入中文语言包，注意：locale files 必须放在bootstrap-table.js后面 -->
<script type="text/javascript" src="{% static  ''website/bootstrap-table-1.12.1-dist/locale/bootstrap-table-zh-CN.min.js'' %}" defer></script>
 
……略
 
</head>

table及toolbar工具条

<div>
<div>
<table id="roleTable"></table>
 
<div id="toolbar">
<div>
<buttondata-toggle="modal" data-target="#roleDialog" id="addBtn">新增
<i></i>
</button>
<buttonid="editBtn">修改
<i></i>
</button>
<buttonid="deleteBtn">删除
<i></i>
</button>
</div>
 
<formid="queryForm">
<div>
<div>
<div>角色名称</div>
<input  type="text"name="roleNameQ" id="roleNameQ" placeholder="请输入角色名称">
</div>
<divid="startTimePicker">
<div>开始时间</div>
<input  type="text"name="startTime" id="startTime" >
<span>
<span></span>
</span>
</div>
<divid="endTimePicker">
<div>结束时间</div>
<input  type="text"name="endTime" id="endTime">
<span>
<span></span>
</span>
</div>
</div>
 
<button type="button" id="queryBtn">查询</button>
</form>
</div>
</div>
</div>

 

 

JS代码片段

数据表初始化配置

 

/**

 * 获取角色表数据

 */

function loadTableData () {

$(''#'' + roleTableID).bootstrapTable({

url: roleTableDataURL, // 服务器数据的加载地址。

method:''get'',     // 服务器数据的请求方式 ''get'' 或 ''post''。

pagination:true,// 在表格底部显示分页信息(显示第 x 到第 x 条记录，总共 x 条记录)，翻页条 // 注意：数据页页数超过1页会才展示翻页条

paginationVAlign:''bottom'', // 指定分页条在垂直方向的位置。''top''，''bottom'' 或 ''both''。

sidePagination:''server'', // 设置在哪里进行分页，可选值为 ''client'' 或者 ''server''。注意：设置 ''server''时，必须设置服务器数据地址（url）或者重写ajax方法。

responseHandler:responseHandler, // 加载服务器数据之前的处理程序，可以用来格式化数据。

pageSize:10, // 如果启用分页，设置初始化界面时，默认的每页显示数据条数

pageList:[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, ''All''],  // 如果设置了分页，设置可供选择的页面记录数。设置为 All 或者 Unlimited，则显示所有记录

smartDisplay:false, // 设置为 true 是程序自动判断显示分页信息和 card 视图。这会导致自定义的 pageList不起作用

silentSort:true, // 设置为true将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效

showColumns:true, // 展示内容列下拉框，方便设置展示那些列

showRefresh:true, //   显示刷新按钮

idField:''id'',     // 指定主键列

        //dataField: "data",  //返回的json数组记录(表格数据)的key.默认是"rows", 数据格式： {"total": 0, "rows": []}

checkboxHeader:true, // 如果设置 false，将在列头隐藏全选复选框，反之则显示，设置为ture时，必须设置singleSelect=false 才有效

clickToSelect:true, // 如果设置 true，则在点击行时，自动选中 rediobox 、 checkbox。

singleSelect:false,  //如果设置为true - 禁止多选，否则不禁止多选

striped:true, // 设置为 true 会有隔行变色效果

toolbar:''#toolbar'', // 一个jQuery 选择器，形如#toolbar, .toolbar，指明自定义的 toolbar       

toolbarAlign:''left'', // 指定 toolbar 水平方向的位置。''left'' 或 ''right''。

columns: [{

field: ''checkbox'',

align: ''center'',   // 设置数据对齐方式可选项： ''left'', ''right'', ''center''

halign: ''center'',  // 设置表头标题对齐方式可选项： ''left'', ''right'', ''center''

valign: ''middle'',   // 设置单元格数据的垂直方向上的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）针对checkbox似乎不起作用

checkbox:true,    // 显示为复选框

width: ''1%'',// 设置列宽度

        },{

field: ''id'',

title: ''角色ID'',

align: ''center'',

halign: ''center'',

valign:''middle'',

sortable:true, // 允许排序列

order:''desc'',  // 默认排序方式升序-asc 降序-desc

width: ''2%'',

        }, {

field: ''name'',

title: ''角色名称'',

align: ''center'',

valign: ''middle'',

halign: ''center'',

width: ''14%''

}, {

field: ''remark'',

title: ''角色描述'',

valign: ''middle'',

align: ''center'',

halign: ''center'',

width: ''20%''

}, {

field: ''is_enable'',

title: ''是否启用'',

valign: ''middle'',

align: ''center'',

halign: ''center'',

width:''4%''

}, {

field: ''creater'',

title: ''创建人'',

valign: ''middle'',

align: ''center'',

halign: ''center'',

width:''7%''

}, {

field: ''create_time'',

title: ''创建时间'',

valign: ''middle'',

align: ''center'',

halign: ''center'',

width:''11%''

}, {

field: ''modifier'',

title: ''修改人'',

valign: ''middle'',

align: ''center'',

halign: ''center'',

width:''7%''

},{

field: ''modify_time'',

title: ''修改时间'',

valign: ''middle'',

align: ''center'',

halign: ''center'',

width:''11%''

},{

field:''operate'',

title:''操作'',

algin:''left'',

halgin:''center'',

width:''23%'',

events: operateEvents,

formatter:operateFormatter

} ]

    });

}

 

// 加载表格数据

loadTableData();

 

加载服务器数据之前的数据处理(responseHandler)

/**
 * 加载服务器数据之前的处理程序，可以用来格式化数据。
 * 参数：result为从服务器请求到的数据
 * @param result
 */
function responseHandler(result){
if (result.success == ''false'') {
alert(''获取角色信息失败'');
return;
    }
 
// 返回数据，渲染表格
return {
total: result.data.total, //总页数, key名称固定为"total"
rows: result.data.rows    //行数据，key名称必须和bootstrapTable函数中dataField的值保持一致，默认为rows.
};
};
 

格式化操作列

/**
 *  操作列格式化函数
 */
function operateFormatter(value, row, index) {
if (row.is_enable == ''是'') {
return  ''''+
''<div>'' +
''<button>分配资源&nbsp;<i></i></button>'' +
''<button>修改&nbsp;<i></i></button>'' +
''<button>删除&nbsp;<i></i></button>'' +
''<button>禁用&nbsp;<i></i></button>'' +
''</div>'';
    } else {
return  ''''+
''<div>'' +
''<button>分配资源&nbsp;<i></i></button>'' +
''<button>修改&nbsp;<i></i></button>'' +
''<button>删除&nbsp;<i></i></button>'' +
''<button>启用&nbsp;<i></i></button>'' +
''</div>'';
    }
 
}
 

给操作列按钮注册点击事件

// 给操作按钮注册点击事件

window.operateEvents = {

''click .asign-resource'': function (event, value, row, index) { // 注意click和.class之间必须有空格

……略

    },

''click .edit'': function (event, value, row, index) {

……略

 

    },

''click .delete'': function (event, value, row, index) {

……略

    },

''click .switch'': function (event, value, row, index) {

……略

    }

};

 

函数参数说明：

event：jQuery事件（参考Events）。

value：字段名（实践发现，该参数获取到的值为undefined

row：json串格式表示的行数据

index：所点击行的index

 

给toolbar工具条按钮添加点击事件

// 给查询按钮增加点击事件
$(''#'' + queryBtnID).click(function () {
//刷新处理，指定query 的参数，注：此地方指定的参数，仅在当次刷新时使用
 
var dataArray = $(''#'' + queryFormID).serializeArray();
 
var queryContent = {}
$.each(dataArray, function () {
queryContent[this.name] = this.value;
    });
 
// 刷新如果不指定参数刷新：$(tableSelector).bootstrapTable(''refresh'');
$(''#'' + roleTableID).bootstrapTable(''refresh'', {
query: queryContent
});
 
});
 
// 给表格上方的修改按钮绑定点击事件
$(''#'' + editBtnID).click(function() {
editRole(''byTopEditBtn'');
});
 
// 给表格上方的删除按钮绑定点击事件
$(''#'' + deleteBtnID).click(function() {
deleteRole(''byTopDeleteBtn'');
});
 

提交新增、修改表单

/**

 * 提交新增、修改角色表单

 */

$(document).ready(function() {

$(''#'' + roleFormID).submit(function() {

var dataArray = $(''#'' + roleFormID).serializeArray();

 

var data = {};

$.each(dataArray, function () {

data[this.name] = this.value;

        });

 

var csrfToken = getCookie(''csrftoken'');

if (csrfToken == '''') {

alert(''获取Cookie失败'');

return false;

        }

 

if (opType == ''add'') { // 新增

$.ajax({

type: "POST",

url: addRoleURL,

async: false,

data: data,

beforeSend: function (xhr, settings) {

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

                        xhr.setRequestHeader("X_CSRFTOKEN", csrfToken);

                    }

                },

success: function (result) {

if (result.success == ''true'') {

alert(result.msg);

 

// 顶部插入一条记录

$(''#'' + roleTableID).bootstrapTable(''insertRow'', {index: 0, row: result.data});

$(''#'' + roleTableID).bootstrapTable(''refresh'');

 

// 隐藏模态对话框，并重置数据

$(''#'' + roleDialogID).modal(''hide'');

                    } else {

alert(result.msg + "，" + result.reason);

                    }

                },

error: function(XmlHttpRequest, textStatus, errorThrown) {

alert(''新增角色请求失败'' + XmlHttpRequest.responseText);

                }

            });

        } else if (opType == ''update'') { // 修改

data[''id''] = currentRole.id;

$.ajax({

type: "POST",

url: updateRoleURL,

async: false,

data: data,

beforeSend: function (xhr, settings) {

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

                        xhr.setRequestHeader("X_CSRFTOKEN", csrfToken);

                    }

                },

success: function (result) {

if (result.success == ''true'') {

alert(result.msg);

 

// 在页面上更新角色信息

delete data[''csrfmiddlewaretoken''];

 

// 更新行记录

$(''#'' + roleTableID).bootstrapTable(''updateRow'', {index: parseInt(rowIndex), row:result.data});

 

// 隐藏模态对话框，并重置数据

$(''#'' + roleDialogID).modal(''hide'');

                    } else {

alert(result.msg + "，" + result.reason);

// 需要手动关闭模态对话框，所以也会自动重置数据

}

                },

error: function(XmlHttpRequest, textStatus, errorThrown) {

alert(''修改角色请求失败'' + XmlHttpRequest.responseText);

// 需要手动关闭模态对话框，所以也会自动重置数据

}

            });

        }

 

return false; // 避免跳转到django的返回结果数据页

});

});

 

 

插入行

$(''#tableID'').bootstrapTable(''insertRow'', {index: 0, row: result.data});

参数说明：

index 新增行的索引

row  新增行的数据，json串表示

 

更新行

$(''#tableID'').bootstrapTable(''updateRow'', {index: parseInt(rowIndex), row:result.data});

 

参数说明

index 要更新行的索引

row  要更新行的数据据，json串表示

 

修改记录

 

/**

 * 修改角色

 */

function editRole(flag) {

opType = ''update'';

if (flag == ''byTopEditBtn'') { // 通过点击表格上方的修改按钮进入

var rowArray = $(''#'' + roleTableID).bootstrapTable(''getSelections'');

if (rowArray.length <1) {

alert(''请先选择要修改的角色'');

return;

        } else if (rowArray.length >1) {

alert(''每次修改，只能选择一个角色'');

return;

        }

 

// 获取选中行索引

rowIndex = $(''#'' + roleTableID).find(''tbody>tr.selected'').first().attr(''data-index'');

 

currentRole = rowArray[0]; // 记录当前被修改的角色信息

 

data = [{''name'': ''roleName'', ''value'':rowArray[0].name}, {''name'':''roleDesc'', ''value'':rowArray[0].remark}]

    } else if (flag == ''byRowEditBtn'') { // 通过点击行右侧的修改按钮进入

data = [{''name'': ''roleName'', ''value'':currentRole.name}, {''name'':''roleDesc'', ''value'':currentRole.remark}]

    }

 

// 用所选记录信息，填充即将弹出对话框中表单组件值

$.each(data, function () {

$(''#'' + this.name).val(this.value);

    });

 

$(''#'' + roleDialogID).modal(''show''); // 打开修改模态对话框

 

}

 

获取选中行索引

rowIndex = $(''#'' + roleTableID).find(''tbody>tr.selected'').first().attr(''data-index'');

 

这里为啥要获取，为啥可以这么获取？原因是这样的，通过选择表记录行，然后点击表格上方的修改按钮修改对应记录，这种情况下，无法直接获取对应行记录的索引，导致没法更新对应记录行，所以需要获取索引，没找到对应，至于为啥这么获取，是由table 表结构决定的，如下图：

 

 

 

删除记录

/**

 * 删除角色

 */

function deleteRole(flag) {

var idArray = [];

if (flag == ''byTopDeleteBtn'') { // 通过点击表格上方的删除按钮进入

rowArray = $(''#'' + roleTableID).bootstrapTable(''getSelections'');

if (rowArray.length <1) {

alert(''请先选择要删除的角色'');

return;

        }

    } else if (flag == ''byRowDeleteBtn'') { // 通过点击行右侧的删除按钮进入

idArray.push(currentRole.id);

    }

 

var mark = true; // 标记是否删除成功

if (confirm(''是否删除选中记录?'')) {

$.each(rowArray, function() {

idArray.push(this.id);

        });

 

$.ajax({

type: "POST",

url: deleteRoleURL,

async: false,

data: {''idArray'':"" + idArray + ""},

success: function (result) {

if (result.success == ''true'') {

alert(result.msg);

// 批量删除对应记录行

$(''#'' + roleTableID).bootstrapTable(''remove'',{ field: ''id'', values: idArray});

//$(''#'' + roleTableID).bootstrapTable(''refresh'');

} else {

alert(result.msg + "，" + result.reason);

                }

            },

error: function(XmlHttpRequest, textStatus, errorThrown) {

alert(''删除角色请求失败'' + XmlHttpRequest.responseText);

            }

        });

    }

}

 

删除记录

$(''#tableID'').bootstrapTable(''remove'',{ field: ''id'', values: idArray});

 

field: 需要删除的行的 field 名称，

values:  需要删除的行的值，类型为数组。

 

获取选中行

$(''#tableID'').bootstrapTable(''getSelections'');

getSelections   返回所选的行，当没有选择任何行的时候返回一个空数组

 

后台代码片段

查询表数据

def role_tabe_data(request):

''''''

获取角色表数据

:param request:

    ''''''

 

if request.method == ''GET'':

        rows = [] # 用于存储记录行

table_data = {"total": 0, "rows": []}

 

try:

            params = request.GET

 

# search = params.get(''search'')          # 通过表格插件自带的搜索框搜索的内容 # 如果要实现，需要确认按哪些列搜索

page_size =  int(params.get(''limit''))  # 每页记录数

offset = int(params.get(''offset''))

            page_index =  offset // page_size + 1  # 第几页数据

 

sort = params.get(''sort'')       # 排序字段 // 初始化页面时，无排序获取值为None

order = params.get(''order'')     # 排序方式

role_name = params.get(''roleNameQ'')   # 角色名称

start_time = params.get(''startTime'') # 开始时间

end_time = params.get(''endTime'')     # 结束时间

 

 

sql_ddl = ''select id, name, remark, is_enable, creater, create_time, modifier,  modify_time from website_role ''

 

if role_name:

                sql_ddl = sql_ddl + "where name like ''%s%s'' " % (role_name, ''%%'')

                temp_mark = 1

else:

                temp_mark = 0

 

if start_time:

if temp_mark:

                    sql_ddl = sql_ddl + "and create_time>=''%s'' " % start_time

else:

                    sql_ddl = sql_ddl + "where create_time>=''%s'' " % start_time

                temp_mark = 1

else:

                temp_mark = 0

 

if end_time:

if temp_mark:

                    sql_ddl = sql_ddl + "and create_time<=''%s'' " % end_time

else:

                    sql_ddl = sql_ddl + "where create_time<=''%s'' " % start_time

 

 

if order and sort:

                sql_ddl = sql_ddl + ''order by %s %s'' % (sort, order)

else:

                sql_ddl = sql_ddl + ''order by id desc'' # 最新创建的排在最前面

 

records = Role.objects.raw(sql_ddl)

            records = json.loads(serializers.serialize(''json'', records), encoding=''utf-8'')

 

            table_data["total"] = len(records)

 

            paginator = Paginator(records, page_size) # 设置每页展示的数据

try:

                page = paginator.page(page_index)

except PageNotAnInteger as e: # 如果请求的页面编号不存在，返回第一页数据

logger.warn(''%s'' % e)

                page = paginator.page(1)

except EmptyPage as e: # 如果请求页面，超出页面范围，返回最后一页数据

logger.warn(''%s'' % e)

                page = paginator.page(paginator.num_pages)

            records = page.object_list

 

for record in records:

                row = {}

                row[''id''] = record[''pk'']

                row.update(record[''fields''])

if row[''is_enable'']:

                    row[''is_enable''] = ''是''

else:

                    row[''is_enable''] = ''否''

rows.append(row)

 

            table_data["rows"] =  rows

            content = {''data'':table_data, ''msg'':''获取角色信息成功'', ''success'':''true'', ''reason'': ''''}

except Exception as e:

            logger.error(''getting roles info data failed: %s'' % e)

            content = {''data'':[], ''msg'':''获取角色信息失败'',  ''success'':''false'', ''reason'': ''%s'' % e}

else:

        logger.error(''only get method allowed for getting roles data'')

        content = {''data'':[], ''msg'':''获取角色信息失败'',  ''success'':''false'', ''reason'': ''only get method allowed for getting roles data''}

return JsonResponse(content)

 

说明：

bootstarp-table默认只支持按单列排序，默认打开页面，请求表数据时，会附加提供以下参数：

order=asc&offset=0&limit=pageSize

 

或者如下(添加了搜索框的情况下)

search=&order=asc&offset=0&limit=pageSize

 

search：前端输入的搜索内容

order:排序方式,asc - 升序 desc - 降序

sort：需要排序的列

offset：偏移

limit：限制查询返回记录数，即每页记录数

 

如下，我们可以通过limit和offset获取要查询要查询页面的索引(索引从1开始)

page_size =  int(params.get(''limit''))  # 每页记录数

offset = int(params.get(''offset''))

page_index =  offset // page_size + 1  # 第几页数据

新增记录

def add_role(request):

''''''

新增角色

    ''''''

if request.method == ''POST'':

try:

            params = request.POST

            creater = str(request.user)

            role_name = params.get(''roleName'')      # 资源名称

role_desc = params.get(''roleDesc'')      # 资源描述

create_time = datetime.now().strftime(''%Y-%m-%d %H:%M:%S'')

 

# 验证数据合法性

if not role_name:

                content = {''msg'':''新增角色失败'',  ''success'':''false'', ''reason'': ''角色名称不能为空''}

return JsonResponse(content)

 

            role_obj = Role(name=role_name,

remark=role_desc,

is_enable=1,

creater = creater,

create_time=create_time)

            role_obj.save()

            data = {''id'':role_obj.id, ''name'':role_name, ''remark'':role_desc, ''is_enable'':''是'', ''creater'':str(creater), ''create_time'':create_time, ''modifier'':''-'', ''modify_time'':''-'' }

            content = {''data'':data, ''msg'':''新增角色成功'', ''success'':''true'', ''reason'':''''}

except Exception as e:

            logger.error(''adding role failed: %s'' % e)

            content = {''data'':{}, ''msg'':''新增角色失败'',  ''success'':''false'', ''reason'': ''%s'' % e}

else:

        logger.error(''only post method allowed for adding role data'')

        content = {''data'':{}, ''msg'':''新增角色失败'',  ''success'':''false'', ''reason'': ''only get method allowed for adding role data''}

return JsonResponse(content)

 

修改记录

 

def update_role(request):

''''''

修改角色

    ''''''

if request.method == ''POST'':

try:

            params = request.POST

            modifier = str(request.user)

            id = params[''id'']

            role_name = params[''roleName'']      # 资源名称

role_desc = params[''roleDesc'']      # 资源描述

modify_time = datetime.now().strftime(''%Y-%m-%d %H:%M:%S'')

 

# 数据合法性验证

if not Role.objects.exclude(id=id).exists():

return JsonResponse({''msg'':''修改失败'', ''success'':''false'',  ''reason'': ''角色不存在''})

 

# 更新数据

obj = Role.objects.get(id=id)

            obj.name = role_name

            obj.remark = role_desc

            obj.modify_time = modify_time

            obj.modifier = modifier

            obj.save()

 

            data = { ''name'':role_name, ''remark'':role_desc, ''modify_time'':modify_time, ''modifier'':modifier}  # 返回需要更新的数据，以便页面更新对应行信息

content = {''msg'':''修改成功'', ''data'':data, ''success'':''true'', ''reason'':''''}

except Exception as e:

            logger.error(''updating role failed: %s'' % e)

            content = {''msg'':''修改失败'', ''data'':{}, ''success'':''false'', ''reason'': ''%s'' % e}

else:

        logger.error(''only post method allowed for updating role'')

        content = {''msg'':''修改失败'', ''data'':{}, ''success'':''false'', ''reason'': ''only post method allowed for updating role''}

return JsonResponse(content)

 

删除记录

def delete_role(request):
''''''
删除角色
    ''''''
 
if request.method == ''POST'':
try:
            params = request.POST
            id_list = eval(params.get(''idArray'') + ",") # 如果不加逗号，前端只传递一个参数时，这里获取到的id_list为单个整数值
 
mark = True
reason = ''''
try:
with transaction.atomic():
for id in id_list:
                        role = Role.objects.filter(id=id)
if role.exists():
                            role.delete()
except Exception as e:
                reason = ''deleting role failed: %s'' % e
                logger.error(reason)
                mark = False
 
            if mark:
return JsonResponse({''msg'':''删除成功'', ''success'':''true'',  ''reason'': ''''})
else:
return JsonResponse({''msg'':''删除失败'', ''success'':''false'',  ''reason'': ''%s'' % reason})
except Exception as e:
            logger.error(''deleting role failed: %s'' % e)
            content = {''msg'':''删除失败'', ''success'':''false'', ''reason'': ''%s'' % e}
else:
        logger.error(''only post method allowed for deleting role'')
        content = {''msg'':''删除失败'', ''success'':''false'', ''reason'': ''only post method allowed for deleting role''}
return JsonResponse(content)

 

 

  1. 3.   参考链接

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap vs Angular 2：多脚本加载器中的错误！找不到模块：错误：/〜/ bootstrap / did / js / bootstrap.js

Bootstrap vs Angular 2：多脚本加载器中的错误！找不到模块：错误：/〜/ bootstrap / did / js / bootstrap.js

我用ng new klw创建了一个新的Angular 2项目

>我安装了bootstrap：npm install bootstrap @ next
>将样式和脚本添加到角度

"styles": [
    "styles.css","../node_modules/bootstrap/dist/css/bootstrap.css"
  ],"scripts": [
"../node_modules/jquery/dist/jquery.js","../node_modules/tether/dist/js/tether.js","../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

>集成bootstrap 4到angular-cli：npm install –save @ ng-bootstrap / ngbootstrap
>将NgbModule导入添加到app.module.ts中
>添加到导入部分NgbModule到app.module.ts
>修改后的app.module.html：< NgbAlert>提示文字< / NgbAlert>

这是我错过的？

当我运行服务时,我得到以下错误：

ERROR in Error encountered resolving symbol values statically. Could not resolve @ng-bootstrap/ng-bootstrap relative to F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts.,resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts,resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\jquery\dist\jquery.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\js\bootstrap.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\css\bootstrap.css' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css

ERROR in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts (8,25): Cannot find module '@ng-bootstrap/ng-bootstrap'.)

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap' in 'F:\src\prjs\angular2\pilot\klw\src\app'
 @ ./src/app/app.module.ts 15:0-55
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.

解决方法

>删除package.json中@ angular / cdk和@ angular / material的符号^
>删除node_modules和package-lock.json
> npm cache clean -f
> npm i

它适用于我的情况.希望它能帮到你

bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify

bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify

Bootstrap简单好用的页面右上角咆哮提示框 - daidaineteasy的专栏 - CSDN博客
https://blog.csdn.net/daidaineteasy/article/details/42026223

Bootstrap弹出窗示例 - sunnylinner的博客 - CSDN博客
https://blog.csdn.net/sunnylinner/article/details/51209630

Bootstrap 弹窗 - 风格色的博客 - CSDN博客
https://blog.csdn.net/qq_27068845/article/details/72953736

Bootstrap 弹出框 | 菜鸟教程
http://www.runoob.com/bootstrap/bootstrap-v2-popover-plugin.html

菜鸟教程在线编辑器
http://www.runoob.com/try/try.php?filename=bootstrap-popover

bootstrap-growl | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
https://www.bootcdn.cn/bootstrap-growl/

bootstrap 提示框插件 bootstrap-growl 和bootstrap-notify用法简介 - 柒小柒七的博客 - CSDN博客
https://blog.csdn.net/u013361445/article/details/48572575

ifightcrime/bootstrap-growl: Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.
https://github.com/ifightcrime/bootstrap-growl

Bootstrap Notify v3.1.3
http://bootstrap-notify.remabledesigns.com/

ifightcrime/bootstrap-growl: Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.
https://github.com/ifightcrime/bootstrap-growl

Demo - Bootstrap notification popup box example using bootstrap-growl JS plugin with demo
http://demo.itsolutionstuff.com/demo/demo-bootstrap-notification-popup-box-example-using-bootstrap-growl-js-plugin-with-demoexample.html

关于Bootstrap 4文件输入和bootstrap-fileinput的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于bootstrap + bootstrap-table + jquery + bootstrap-paginator、Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结、Bootstrap vs Angular 2：多脚本加载器中的错误！找不到模块：错误：/〜/ bootstrap / did / js / bootstrap.js、bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify的相关知识，请在本站寻找。

本文标签：

上一篇使用.format（）格式化带有字段宽度参数的列表（格式化字符串中可以包含用户输入吗）

下一篇检查DataFrame中的哪些列是分类的（dataframe查看列属性）

相关文章