bootstrap switch 在jqgrid的使用

首先导入包

$(function () {
$("#jqGrid").jqGrid({
url: baseURL + ‘sys/dept/list’,
datatype: “json”,
colModel: [
{ label: ‘序号’, name: ‘deptId’, index: “dept_id”, width: 45, key: true },
{ label: ‘医院名称’, name: ‘name’, index: “name”, width: 75 },
{ label: ‘医院描述’, name: ‘nameDescribe’, width: 80 },
{ label: ‘创建时间’, name: ‘createTime’,index:“create_time”, width: 80, formatter:function(cellvalue, options, rowObject){
if(cellvaluenull ||cellvalue""){return “”}
var time = new Date(cellvalue);
return time.getFullYear()+"-"
+(time.getMonth()<9?(“0”+(time.getMonth()+1)):(time.getMonth()+1))+"-"
+(time.getDate()<10?(“0”+time.getDate()):(time.getDate()))+" "
+(time.getHours()<10?(“0”+time.getHours()):(time.getHours()))+":"
+(time.getMinutes()<10?(“0”+time.getMinutes()):(time.getMinutes()))+":"
+(time.getSeconds()<10?(“0”+time.getSeconds()):(time.getSeconds()));
}},
{ label: ‘排序’, name: ‘orderNum’, width: 80,},
{ label: ‘成员数量’, name: ‘parentId’, width: 80,},
{ label: ‘是否启用’, name: ‘delFlag’, index :“del_flag”,width: 80,formatter:runStatus},
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: “#jqGridPager”,
jsonReader : {
root: “page.list”,
page: “page.currPage”,
total: “page.totalPage”,
records: “page.totalCount”
},
prmNames : {
page:“page”,
rows:“limit”,
order: “order”
},
gridComplete:renderSwith
});
})
初始化控件：1.switch控件实际是个checkbox,用‘checked’表示选中启动开关，cellvalue:表示这行选择到的值，这个值一般可以从后台穿过来，比如1：启动，0：关闭。而rowObject则是获取到这行的其他属性值，如果需要将这些值传回后台，则可以跟我我下面的写法赋值
function runStatus(cellValue,optios,rowObject) {
var check = “”;
if (cellValue == 0) {
check = “checked”;
}
var choiceBtn = ‘<input class=“make-switch” id=“mySwitch” type=“checkbox” ’ + check + ‘’ +
’ data-size=“mini” data-deptId="’ + rowObject.deptId + ‘“data-delFlag=”’ + rowObject.delFlag + ‘">’;
console.log(choiceBtn);
return choiceBtn;
}

bootstrapSwitch是js控制初始化，刚刚定义的值的取值方式如下，调用AJAX就可以把值传回后台处理了，最下面的reload是我们打开或者关闭开关后需要重新加载页面。

function renderSwith() {
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ “overflow-x” : “hidden” });
KaTeX parse error: Expected '}', got 'EOF' at end of input: … var deptid=(this).data(“deptid”);
var delflag=$(this).data(“delflag”);
var url= baseURL +“sys/dept/runOrStop”
$.ajax({
type:“POST”,
url:url,
contentType:“application/json”,
data:JSON.stringify({deptId:deptid,delflag:delflag}),
success:function ® {
if(r.code === 1){
alert(‘操作成功’)
}else {
alert(r.msg);
}
vm.reload();
}
})
}
})

3.最重要的是加载完Jqgrid，才能加载bootstrap-switch，不然会导致样子出错。加载控件需要用到Jqgrid一个属性：gridComplete

转自https://www.jianshu.com/p/3d48f31fa279