宁波本地模板网站建设平台,怎么搞软件开发,网站注册页面,.网站链接策略工具栏自定义按钮-ajax请求 前端代码
1.在对应模块的模板文件index.html添加自定义按钮#xff0c;注意按钮要添加id以绑定点击事件
div classpanel panel-default panel-intro{:build_heading()}div classpanel-bodydiv id注意按钮要添加id以绑定点击事件
div classpanel panel-default panel-intro{:build_heading()}div classpanel-bodydiv idmyTabContent classtab-contentdiv classtab-pane fade active in idonediv classwidget-body no-paddingdiv idtoolbar classtoolbar{:build_toolbar(refresh,add,edit,del)}div classdropdown btn-group {:$auth-check(user/group/multi)?:hide}a classbtn btn-primary btn-more dropdown-toggle btn-disabled disabled data-toggledropdowni classfa fa-cog/i {:__(More)}/aul classdropdown-menu text-left rolemenulia classbtn btn-link btn-multi btn-disabled disabled hrefjavascript:; data-paramsstatusnormali classfa fa-eye/i {:__(Set to normal)}/a/lilia classbtn btn-link btn-multi btn-disabled disabled hrefjavascript:; data-paramsstatushiddeni classfa fa-eye-slash/i {:__(Set to hidden)}/a/li/ul/div!-- 添加自定义按钮 --a classbtn btn-primary dropdown-toggle hrefjavascript:; data-toggledropdown idtestButtoni classfa fa-send/i {:__(自定义)}/a/divtable idtable classtable table-striped table-bordered table-hover table-nowrapdata-operate-edit{:$auth-check(user/group/edit)}data-operate-del{:$auth-check(user/group/del)}width100%/table/div/div/div/div
/div2.对应js文件中添加绑定事件注意要写在为表格绑定事件前面 //.......(表格字段) // 自定义功能$(#testButton).on(click, function (){layer.confirm(确定调用自定义功能吗, {btn: [确定, 取消] //按钮}, function (index) {$.ajax({url: user/user/test, //请求接口type: post,dataType: json,data: {ids: 1}, //请求参数success: function (data) {layer.confirm(data.msg, {btn: [确定] //按钮}, function (index2) {Fast.api.refreshmenu(); //刷新列表layer.close(index2); //关闭窗口})return false;}})layer.close(index);});});// 为表格绑定事件Table.api.bindevent(table);后端代码 /*** 自定义按钮*/public function test(){//do something//$this-error(请求失败);$this-success(请求成功);}工具栏自定义按钮-弹窗 1.在对应模块的模板文件index.html添加自定义按钮注意按钮要添加id以绑定点击事件
div classpanel panel-default panel-intro{:build_heading()}div classpanel-bodydiv idmyTabContent classtab-contentdiv classtab-pane fade active in idonediv classwidget-body no-paddingdiv idtoolbar classtoolbar{:build_toolbar(refresh,add,edit,del)}div classdropdown btn-group {:$auth-check(user/group/multi)?:hide}a classbtn btn-primary btn-more dropdown-toggle btn-disabled disabled data-toggledropdowni classfa fa-cog/i {:__(More)}/aul classdropdown-menu text-left rolemenulia classbtn btn-link btn-multi btn-disabled disabled hrefjavascript:; data-paramsstatusnormali classfa fa-eye/i {:__(Set to normal)}/a/lilia classbtn btn-link btn-multi btn-disabled disabled hrefjavascript:; data-paramsstatushiddeni classfa fa-eye-slash/i {:__(Set to hidden)}/a/li/ul/div!-- 添加自定义按钮 --a classbtn btn-primary dropdown-toggle hrefjavascript:; data-toggledropdown idtestButtoni classfa fa-send/i {:__(自定义)}/a/divtable idtable classtable table-striped table-bordered table-hover table-nowrapdata-operate-edit{:$auth-check(user/group/edit)}data-operate-del{:$auth-check(user/group/del)}width100%/table/div/div/div/div
/div2…js文件添加请求接口路径如下面的test_dialog_url // 初始化表格参数配置Table.api.init({extend: {index_url: user/group/index,add_url: user/group/add,edit_url: user/group/edit,del_url: user/group/del,multi_url: user/group/multi,test_dialog_url: user/group/test_dialog, //添加接口路径方法名称要跟接口名称一致table: user_group,}});3.js文件添加按钮绑定事件和表格绑定事件注意这里是两步缺一不可
......
var Controller {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: user/group/index,add_url: user/group/add,edit_url: user/group/edit,del_url: user/group/del,multi_url: user/group/multi,test_dialog_url: user/group/test_dialog, //添加接口路径方法名称要跟接口名称一致table: user_group,}});var table $(#table);// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: id,sortName: id,columns: [[{checkbox: true},{field: id, title: __(Id)},{field: name, title: __(Name)},{field: createtime, title: __(Createtime), formatter: Table.api.formatter.datetime, operate: RANGE, addclass: datetimerange, sortable: true},{field: updatetime, title: __(Updatetime), formatter: Table.api.formatter.datetime, operate: RANGE, addclass: datetimerange, sortable: true},{field: status, title: __(Status), formatter: Table.api.formatter.status},]]});// 1.工具栏自定义弹窗绑定事件$(#testButton).on(click, function (){// Fast.config.openArea [800px,600px]; //设置弹窗宽高,注意这里是全局调整Fast.api.open($.fn.bootstrapTable.defaults.extend.test_dialog_url,自定义弹窗);});// 为表格绑定事件Table.api.bindevent(table);},//2.为表格绑定事件test_dialog: function () {Controller.api.bindevent();},add: function () {Controller.api.bindevent();},edit: function () {Controller.api.bindevent();},......4.写后端代码注意方法名不支持驼峰命名
/*** 自定义弹窗*/
public function test_dialog(){if ($this-request-isAjax()){ //表单提交$params $this-request-param();//获取参数//do something$this-success(操作成功);}//显示模板return $this-view-fetch();
}5.写模板文件
form idadd-form classform-horizontal roleform data-togglevalidator methodPOST actiondiv classform-grouplabel classcontrol-label col-xs-12 col-sm-2姓名:/labeldiv classcol-xs-12 col-sm-8input classform-control nameusername typetext/div/divdiv classform-grouplabel classcontrol-label col-xs-12 col-sm-2电话:/labeldiv classcol-xs-12 col-sm-8input classform-control namephone typetext/div/divdiv classform-group layer-footerlabel classcontrol-label col-xs-12 col-sm-2/labeldiv classcol-xs-12 col-sm-8button typesubmit classbtn btn-success btn-embossed idsubmit{:__(OK)}/buttonbutton typereset classbtn btn-default btn-embossed{:__(Reset)}/button/div/div
/form操作栏自定义按钮-ajax请求 1.js文件添加请求接口路径如下面的test_url // 初始化表格参数配置Table.api.init({extend: {index_url: user/group/index,add_url: user/group/add,edit_url: user/group/edit,del_url: user/group/del,multi_url: user/group/multi,test_url: user/user/test, //添加接口路径table: user_group,}});2.操作字段添加按钮将原来的operate字段栏增加buttons属性注意里面classname属性要有btn-ajax
{field: operate, title: __(Operate), table: table,events: Table.api.events.operate,buttons:[{name:test,//名称text:自定义,title:自定义,classname: btn btn-xs btn-info btn-view btn-ajax,icon: fa fa-check,//图标 可在添加菜单规则处 搜索图标见示例图url: user/user/test,//接口地址 控制器名/方法名confirm: function (row, column) { //确认框return 确定要删除id为 row.id 的记录吗;},visible:function(row){//判断显示隐藏 只有状态为待审核时展示操作按钮if(row.status 0){return true;//显示}else{return false;//隐藏}},refresh:true}],formatter: Table.api.formatter.operate}操作栏自定义按钮-弹窗 1.js文件添加请求接口路径如下面的test_url // 初始化表格参数配置Table.api.init({extend: {index_url: user/group/index,add_url: user/group/add,edit_url: user/group/edit,del_url: user/group/del,multi_url: user/group/multi,test_dialog_url: user/group/test_dialog, //添加接口路径方法名称要跟接口名称一致table: user_group,}});2.js文件操作字段添加按钮将原来的operate字段栏增加buttons属性注意里面classname属性要有btn-ajax
{field: operate, title: __(Operate), table: table,events: Table.api.events.operate,buttons:[{name:test,//名称text:自定义,title:自定义弹窗,classname: btn btn-xs btn-info btn-view btn-dialog, //注意这里要用btn-dialogicon: fa fa-check,//图标 可在添加菜单规则处 搜索图标见示例图url: function (row, column) { //row 表格接收到的数据return user/group/test_dialog?id row.id; //弹窗的对应后台控制器方法 这里是默认index方法 带上id参数},extend: data-area\[60%,50%]\, //这是控制弹窗的弹出的尺寸 width-heightvisible:function(row){//判断显示隐藏 只有状态为待审核时展示操作按钮if(row.status 0){return true;//显示}else{return false;//隐藏}},refresh:true //刷新表格}],formatter: Table.api.formatter.operate
}3.js文件表格绑定事件写在add方法前面即可方法名称要跟接口名称一致
//为表格绑定事件
test_dialog: function () {Controller.api.bindevent();
},//这个add方法是自带的不用复制
add: function () {Controller.api.bindevent();
},4.写后端代码注意方法名不支持驼峰命名
/*** 自定义弹窗*/
public function test_dialog(){if ($this-request-isAjax()){ //表单提交$params $this-request-param();//获取参数//do something$this-success(操作成功);}//显示模板return $this-view-fetch();
}5.写模板文件
form idadd-form classform-horizontal roleform data-togglevalidator methodPOST actiondiv classform-grouplabel classcontrol-label col-xs-12 col-sm-2姓名:/labeldiv classcol-xs-12 col-sm-8input classform-control nameusername typetext/div/divdiv classform-grouplabel classcontrol-label col-xs-12 col-sm-2电话:/labeldiv classcol-xs-12 col-sm-8input classform-control namephone typetext/div/divdiv classform-group layer-footerlabel classcontrol-label col-xs-12 col-sm-2/labeldiv classcol-xs-12 col-sm-8button typesubmit classbtn btn-success btn-embossed idsubmit{:__(OK)}/buttonbutton typereset classbtn btn-default btn-embossed{:__(Reset)}/button/div/div
/form
