因为项目需要,原本项目用的前端框架为easyui,现重构为bootstrap,主要是记录一下使用方法.
先在一个界面引用bootsrap相关js文件,以便测试
引用相关标签(已有)
引用的相关js (已有)
在单独的页面上引用bootstrap 相关js/css(注意:bootstrap是分组件的,需要引用不同的js组件来实现不同的功能)
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/tag.inc.jsp"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My JSP 'weightWay.jsp' starting page</title>
<link rel="stylesheet" href="<c:url value='/mesui/bootstrap/css/bootstrap.min.css'/>" type="text/css"></script>
<link rel="stylesheet" href="<c:url value='/mesui/bootstrap/css/bootstrap-switch.min.css'/>" type="text/css"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap-table.js'/>"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap-switch.min.js'/>"></script>
<script type="text/javascript">
$(function(){
searchdata();
/* $('#my-checkbox').bootstrapSwitch('state',true);
$('[name="my-checkbox"]').bootstrapSwitch({
onText:"开启",
offText:"关闭",
onColor:"success",
offColor:"danger",
size:"small",
onInit:function(element,event,state){//控件初始化时触发
console.log('onInit:');
console.log(this);//开关控件的jQuery对象
console.log(element);//checkbox的DOM elememt元素
console.log(event);//jQuery事件
console.log(state);//开关的初始化选中状态
},
onSwitchChange:function(event,state){
var step = this.value;
if(state==true){
console.log('已打开'+step);
}else{
console.log('已关闭'+step);
}
}
}); */
// $('[name="my-checkbox1"]').bootstrapSwitch();
// $('[name="my-checkbox2"]').bootstrapSwitch();
});
function searchdata(){
$('#weightWay').bootstrapTable({
method: 'post',
editable:true,//开启编辑模式
clickToSelect: true,
cache : false,
url:"<c:url value='/qm/weightWay.sp?method=list'/>",
columns:[
{field:'step_number',title:'工序',align:'center',formatter:function(val,row,index){
var a = row.step_number;
if(a=='20'){
return '挤出';
}
if(a=='30'){
return '辐照';
}
if(a=='40'){
return '扩张';
}
if(a=='50'){
return '上盘';
}
if(a=='60'){
return '切管';
}
if(a=='90'){
return '封帽';
}
}},
{field:'is_feed',title:'投料称重功能',align:'center',formatter: forIsFeed},//
{field:'is_remove',title:'卸盘/筐称重功能',align:'center',formatter: forIsRemove},//
{field:'is_kg',title:'单位',align:'center'},
],
onLoadSuccess:function(){
//$('#my-checkbox1').bootstrapSwitch('state',true);
$('[name="my-checkbox1"]').bootstrapSwitch({
onText:"开启",
offText:"关闭",
onColor:"success",
offColor:"danger",
size:"small",
onInit:function(element,event,state){//控件初始化时触发
console.log('onInit:');
console.log(this);//开关控件的jQuery对象
console.log(element);//checkbox的DOM elememt元素
console.log(event);//jQuery事件
console.log(state);//开关的初始化选中状态
},
onSwitchChange:function(event,state){
var step = this.value;
if(state==true){
console.log('已打开'+step);
}else{
console.log('已关闭'+step);
}
}
});
$('[name="my-checkbox2"]').bootstrapSwitch({
onText:"开启",
offText:"关闭",
onColor:"success",
offColor:"danger",
size:"small",
onInit:function(element,event,state){//控件初始化时触发
console.log('onInit:');
console.log(this);//开关控件的jQuery对象
console.log(element);//checkbox的DOM elememt元素
console.log(event);//jQuery事件
console.log(state);//开关的初始化选中状态
},
onSwitchChange:function(event,state){
var step = this.value;
if(state==true){
console.log('已打开'+step);
}else{
console.log('已关闭'+step);
}
}
})
},
queryParams:{
},
})
}
function forIsFeed(val,row,index){
var a=row.key;
if(0==val){
return '-';
}else{
if(1==val){
$('[name="my-checkboxs1"]').bootstrapSwitch('state',true);
}
if(2==val){
$('[name="my-checkboxs1"]').bootstrapSwitch('state',false);
}
return "<input value='"+a+"' type='checkbox' name='my-checkbox1'/>";
}
}
function forIsRemove(val,row,index){
var a=row.key;
if(0==val){
return '-';
} else{
if(1==val){
$('#my-checkboxs2').bootstrapSwitch('state',true);
}
if(2==val){
$('#my-checkboxs2').bootstrapSwitch('state',false);
}
return "<input value='"+a+"' type='checkbox' name='my-checkbox2' />";
}
}
</script>
</head>
<!-- <input type='checkbox' name='my-checkbox' id='my-checkbox'> -->
<body>
<div>
<table id="weightWay"
class="table table-striped table-bordered table-hover table-condensed" style="width: 60%;"> </table>
</div>
</body>
</html>
测试用的页面