js代码实现部分?

提问 已结 1 524
小白l1
小白l1 2018-9-18
悬赏:80飞吻
版本:layui 2.3.0 浏览器:Google Chrome 68.0.3440.84
后台管理,需要弹出层,我直接弹出另一个页面,ok没问题
table.on('tool(crossContent)', function(obj){
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'linkToIndexCross'){
layer.open({
type: 2,
title: '交叉客户信息',
shadeClose: true,
skin: 'layer-ext-moon',
shade: false,
maxmin: true, //开启最大化最小化按钮
offset: 'auto',
area: ['900px', '400px'],
content: "{:url('Customer.customerCross/indexCross')}?Tyshxybm="+data.Tyshxybm
});
}
});
,问题在子页面上,我操作layui数据表格,可以,但是为什么最后按钮实现失败,我明明写了的
<script type="text/html" id="buttonGroupCross">
<a class="layui-btn layui-btn-xs" lay-event="linkToQjt"><i class="layui-icon"></i>链接</a>
</script>
table.render({
elem: '#table'
,height: 500
,url: "{:url('Customer.customer_cross/indexCross')}?bm="+bm
,page: true //开启分页
,cols: [[ //表头
{checkbox: true, fixed: 'left'},
{field: 'Tyshxybm', title: "统一社会信用编码"} ,
{field: 'Khbh', title: "客户编号"},
{field: 'Khmc', title: "客户名称"},
{field: 'Yzyed', title: "已占用额度"},
{title: "操作",fixed: 'right', width: 100, align:'center', toolbar: '#buttonGroupCross'}
]],
done: function (res, curr, count) {
$('th').css({
'background-color': '#18bc9c',
'color': '#fff',
'font-size': '10px',
});
}
});
其他功能不实现就算了,为什么按钮会没有跳转呢?没办法话都说不利索,下面提供完整页面代码,求大神指点
<script src="__CDN__/assets/libs/layui/layui.all.js"></script>
<div id="content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="content">
<div class="panel panel-default panel-intro">
<div class="panel-heading"><div class="panel-lead"><em>{:__('关联客户')}</em></div></div>
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post" action="" style="display: none;">
<fieldset>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
<label class="control-label col-xs-4">客户编号:</label>
<div class="col-xs-8">
<div class="sp_container" style="width: 196px;">
<input type="text" class="form-control selectpage sp_input" name="Khbh" value="" placeholder="客户编号" id="Khbh" data-index="4" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="col-sm-8 col-xs-offset-4">
<button type="button" class="btn btn-success" formnovalidate="" data-type="searchTable">提交</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</div>
</fieldset>
</form>
<div class="fixed-table-toolbar">
<div class="bs-bars pull-left">
<div id="toolbar" class="toolbar" lay-filter="toolbar" style="margin-top: -5px;">
<a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新" data-type="refresh"><i class="fa fa-refresh"></i></a>
<a href="javascript:;" class="btn btn-success btn-add" title="添加" data-type="add"><i class="fa fa-plus"></i> 添加</a>
<a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled" title="编辑" data-type="edit"><i class="fa fa-pencil"></i> 编辑</a>
<a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled" title="删除" data-type="delete"><i class="fa fa-trash"></i>删除</a>
<a href="javascript:;" class="btn btn-primary btn-search" title="条件" data-type="more"><i class="fa fa-cog"></i> 更多</a>
</div>
</div>
<div class="columns-right pull-right" style="margin-top:10px;margin-bottom:10px;">
<button class="btn btn-default" type="button" name="commonSearch" title="普通搜索"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div class="columns columns-right btn-group pull-right">
<button class="btn btn-default" type="button" name="toggle" aria-label="toggle" title="切换"><i class="glyphicon glyphicon-list-alt icon-list-alt"></i></button>
<div class="keep-open btn-group" title="列">
<button type="button" aria-label="columns" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-th icon-th"></i> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
</ul>
</div>
<div class="export btn-group">
<button class="btn btn-default dropdown-toggle" aria-label="export type" title="导出数据" data-toggle="dropdown" type="button"><i class="glyphicon glyphicon-export icon-share"></i> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li role="menuitem" class="downExcel" data-type="downExcel"><a href="javascript:void(0)">MS-Excel</a></li>
</ul>
</div>
</div>
<div class="pull-right search">
<input class="form-control" type="text" placeholder="搜索" />
</div>
</div>
<div class="fixed-table-container" style="padding-bottom: 0px;">
<div class="fixed-table-body">
<table id="table" lay-filter="associatedContent" class="table table-striped table-bordered table-hover" width="100%" style="margin-top: -20px;">
</table>
<input type="hidden" id="bm" value="{$bm}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/html" id="buttonGroupCross">
<a class="layui-btn layui-btn-xs" lay-event="linkToQjt"><i class="layui-icon"></i>链接</a>
</script>
<script type="text/javascript">
(function ($) {
var bm = $("#bm").val();
var page = {
//初始化
init: function () {
page.initTable();
},
//初始化配置
initTable: function () {
layui.use('table', function(){
var table = layui.table;

//第一个实例
table.render({
elem: '#table'
,height: 500
,url: "{:url('Customer.customer_cross/indexCross')}?bm="+bm
,page: true //开启分页
,cols: [[ //表头
{checkbox: true, fixed: 'left'},
{field: 'Tyshxybm', title: "统一社会信用编码"} ,
{field: 'Khbh', title: "客户编号"},
{field: 'Khmc', title: "客户名称"},
{field: 'Yzyed', title: "已占用额度"},
{title: "操作",fixed: 'right', width: 100, align:'center', toolbar: '#buttonGroupCross'}
]],
done: function (res, curr, count) {
$('th').css({
'background-color': '#18bc9c',
'color': '#fff',
'font-size': '10px',
});
}
});
table.on('checkbox(associatedContent)', function(){
var checkStatus = table.checkStatus('table'),
data = checkStatus.data ;
if(data.length === 0) {
$("a[data-type='edit']").attr("class","btn btn-success btn-edit btn-disabled disabled");
$("a[data-type='delete']").attr("class","btn btn-danger btn-del btn-disabled disabled");
}else if(data.length > 1){
$("a[data-type='edit']").attr("class","btn btn-success btn-edit btn-disabled disabled");
$("a[data-type='delete']").attr("class","btn btn-danger btn-del");
} else{
$("a[data-type='edit']").attr("class","btn btn-success btn-edit");
$("a[data-type='delete']").attr("class","btn btn-danger btn-del");
}
});
//监听行工具事件
table.on('tool(associatedContent)', function(obj){
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'linkToQjt'){
layer.open({
type: 2,
title: '客户全景图',
shadeClose: true,
skin: 'layer-ext-moon',
shade: false,
maxmin: true, //开启最大化最小化按钮
offset: 'auto',
area: ['800px', '400px'],
content: "{:url('Customer.customerQjt/base')}?khbh="+data.Khbh
});
}
});
//自定义查询
var $ = layui.$, active = {
searchTable : function() {
var data = {}
$("form").serializeArray().map(function(v){
data[v.name]=v.value;
});
table.reload('table', {
page: {
curr: 1
},
where : data
});
},
downExcel : function() {
$.ajax({
type: 'get',
url: "{:url('Customer.customerCross/exportCross')}",
data: $("form").serialize(),
dataType: 'json',
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.msg('文件下载中请稍后...', {
icon: 16,shade: 0.1
});
},
complete: function () {
layer.close(this.layerIndex);
},
success: function (data) {
if(data.code==1){
location.href = "__ROOT__" + data.url;
}else{
layer.msg(data.msg, {icon:5});
}
},
});
},
refresh : function(){
table.reload('table', {
page: {
curr: 1
}
});
},
add : function(){
layer.open({
type: 2,
title: '添加',
shadeClose: true,
skin: 'layer-ext-moon',
shade: false,
maxmin: true, //开启最大化最小化按钮
offset: 'auto',
area: ['800px', '400px'],
content: "{:url('Customer.customerCross/addCross')}?bm="+bm,
});
},
edit : function(){
var checkStatus = table.checkStatus('table'),
data = checkStatus.data ;
if(data.length === 0){
layer.msg('请选择一行');
} else if(data.length > 1){
layer.msg('只能同时编辑一个');
} else {
layer.open({
type: 2,
title: '添加',
shadeClose: true,
skin: 'layer-ext-moon',
shade: false,
maxmin: true, //开启最大化最小化按钮
offset: 'auto',
area: ['800px', '400px'],
content: "{:url('Customer.customerCross/editCross')}?ids="+data[0].Id,
});
}
},
delete : function(){
layer.confirm("您确定删除?",function(){
var checkStatus = table.checkStatus('table')
,dataList = checkStatus.data, deList=[];
for(var i=0;i<dataList.length;i++){
deList.push(dataList[i].Id);
}
$.ajax({
type: 'post',
url: "{:url('Customer.customerCross/delCross')}",
data: {ids:deList.join(",")},
dataType: 'json',
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.msg('文件删除中请稍后...', {
icon: 16,shade: 0.1
});
},
complete: function () {
layer.close(this.layerIndex);
},
success: function (data) {
if(data.code==1){
layer.msg(data.msg, {icon:6});
table.reload('table', {});
}else{
layer.msg(data.msg, {icon:5});
}
},
});
});

},
more :function(){
$('form').slideToggle(500);
}
};
$('.btn').on('click', function() {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('.downExcel').on('click', function() {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
},
};
page.init();
})(jQuery);
</script>
回帖
  • 试了下,建议f12报错截图出来
    1:可能问题 你引入的是layui.all.js
    而文档写的很清楚,//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可
    可能会与你的layui.use()冲突,如果你引入layui.all.js 写法应该是直接写 var table= layui.table;不需要 layui.use()
    如果你想使用layui.use() 那么请引入layui.js即可
    2: 建议你完全不需要这样
    (function ($) {
    var bm = $("#bm").val();
    var page = {
    //初始化
    init: function () {
    page.initTable();
    },
    //初始化配置
    initTable: function () {
    而是 直接写你的事件,因为这样写 同等于 脱裤子放屁
    建议写法如下
    //layui.js写法
    layui.use(['layer', 'form'], function(){
    var layer = layui.layer
    ,form = layui.form;
    var bm = $("#bm").val();

    layer.msg('Hello World');
    });
    //layui.all.js写法
    var layer = layui.layer
    ,form = layui.form;
    var bm = $("#bm").val();
    //最开始你的写法
    (function ($) {
    var layer = layui.layer
    ,form = layui.form;

    var bm = $("#bm").val();

    layer.msg('Hello World');
    }) ;
    还有一点需要注意,layui的jq可能会与你的jq发生冲突,所以...最好不要自己单独引入
    0 回复