可编辑运行效果:
禁止编辑效果,会变灰:
'columns' => [
[
'label' => '运行编辑开关:',
'attribute' => 'status',
'labelColOptions' => ['class' => 'col-xs-2 column', 'style' => 'text-align:right;font-weight:normal'],
'valueColOptions' => ['class' => 'col-xs-1'],
'type' => DetailView::INPUT_SWITCH,
'widgetOptions' => [
'pluginOptions' => [
'size' => 'small', //按钮大小(有默认值,默认值按钮会比较大)
'onText' => '是', //打开按钮名字(默认"ON")
'offText' => '否, //关闭按钮名字(默认"OFF")
'onColor' => 'success', //定义打开开关背景颜色
],
//pluginEvents 点击开关触发的事件
'pluginEvents' => [
'switchChange.bootstrapSwitch' => 'function(obj){
//这里就是正常的js写法了
var showroomStatus = $("#showStatus").val();
var showStatus = $(this).is(":checked")?1:0;
if (showroomStatus == 1) {
alert("操作有误");
return;
}
if (showStatus == 1) {
$("#basemodel-minprice").css("cursor","");
$("#basemodel-minprice").removeAttr("readOnly");
} else {
//调用了页面上js中定义的一个方法
setMinPrice();
}
}'
],
],
],
[
'label' => '禁止编辑开关:',
'attribute' => 'status-disabled',
'labelColOptions' => ['class' => 'col-xs-2 column', 'style' => 'text-align:right;font-weight:normal'],
'valueColOptions' => ['class' => 'col-xs-1'],
'type' => DetailView::INPUT_SWITCH,
'widgetOptions' => [
'pluginOptions' => [
'size' => 'small',
'onText' => ' ',
'offText' => ' ',
'onColor' => 'success'
],
//添加disabled 属性等于disabled即可;如果是要根据判断条件实现可以直接在后面写三元运算符
'disabled' => 'disabled',
],
],
]
遗留问题:
添加禁止编辑属性之后,背景会灰,想去掉因为不是很美观,但是目前还没找到方法去除,有了解的同学,可以留下答案吗?