fastadmin:在新增页面，打开弹窗单选，参数回传 |
您所在的位置：网站首页 › fastadmin关联查询 › fastadmin:在新增页面，打开弹窗单选，参数回传 |
fastadmin:在新增页面，打开弹窗单选，参数回传
|
样式： 
核心代码： 一、弹窗的控制器中： // 定义一个公共函数select()，如果这个请求是Ajax，则返回index()函数，否则返回view对象的fetch()函数。 public function select() { if ($this->request->isAjax()) { return $this->index(); } return $this->view->fetch(); }二、弹窗的页面样式,新增的页面select.html(位置同add.html一致) 
三、弹窗对应js 写入select的方法 select: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'popup/purchase/itemno/select',//页面路径 } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, sortName: 'id', showToggle: false, showExport: false, maintainSelected: true, searchFormVisible: true, //是否始终显示搜索表单 // commonSearch: false,//快速搜索 singleSelect: true,//多选变为单选 visible: false,//浏览模式(卡片切换)、显示隐藏列、导出、通用搜索全部隐藏 showColumns: false,//列，可隐藏不显示的字段 search:false,//快速搜索，搜索框 columns: [ [ // {checkbox: true},//隐藏复选框 {field: 'item_no', title: __('Item_no'), operate: 'LIKE'}, {field: 'item_name', title: __('Item_name'), operate: 'LIKE'}, {field: 'item_desc', title: __('Item_desc'), operate: 'LIKE'}, {field: 'units', title: __('Units'), operate: 'LIKE'}, //选择按钮 { field: 'operate', title: __('Operate'), events: { 'click .btn-chooseone': function (e, value, row, index) { // 回传数据给Fast.api.open的callback,很重要 Fast.api.close({row:row}); }, }, formatter: function () {//点击按钮跳转到对应的页面 return ' ' + __('Choose') + ''; }, } ] ] }); // 为表格绑定事件 Table.api.bindevent(table); },四、新增页面的前端展示 样式： 
给'料号'增加点击出现弹窗的功能， 增加回传值要用到的id,①id="item_no"；②id="item_name"；③id="item_desc"；④id="units" 增加需要打开弹窗的地址：data-url="popup/purchase/itemno/select" class中写入：fachoosetable 增加参数行信息，传给弹窗，以便回传参数数，知道对应的具体行：data-line="" // 料号 // 料号名称 // 规格型号 // 单位五、新增页面对应的js //选择页面弹窗 //选择所有具有"form"角色的表单。 var form = $("form[role=form]"); //fachoosetable(form)是一个函数，它可以用来检查一个表单中的输入字段，以确保它们符合预定义的模式或规则。 fachoosetable(form); //定义函数fachoosetable() function fachoosetable (form) { // 如果表单中的".fachoosetable"元素的大小大于0，则执行下面的代码。 if ($(".fachoosetable", form).size() > 0) { //对class为fachoosetable的组件执行点击事件 $(".fachoosetable", form).on('click', function () { var that = this; //获取该界面的前端页面传来的line（前端展示的是data-line） var line = $(this).data("line") ? $(this).data("line") : false; //获取该界面的前端界面传来的url var url = $(this).data("url") ? $(this).data("url") : (typeof Backend !== 'undefined' ? "popup/purchase/itemno/select" : ""); //打开弹窗 parent.Fast.api.open(url + "?line=" + line, __('Choose'), { //回传值 callback: function (data) { //直接给页面的该行数据定义值 $("#item_no"+line).val(data.row.item_no); $("#item_name"+line).val(data.row.item_name); $("#item_desc"+line).val(data.row.item_desc); $("#units"+line).val(data.row.units); } }); return false; }); } }全部代码： 选择页面: select.html js define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { select: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'popup/purchase/itemno/select', } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, sortName: 'id', showToggle: false, showExport: false, maintainSelected: true, searchFormVisible: true, //是否始终显示搜索表单 // commonSearch: false,//快速搜索 singleSelect: true,//多选变为单选 visible: false,//浏览模式(卡片切换)、显示隐藏列、导出、通用搜索全部隐藏 showColumns: false,//列，可隐藏不显示的字段 search:false,//快速搜索，搜索框 columns: [ [ // {checkbox: true, cellStyle: {css: {"min-width": "200px"}}}, {field: 'item_no', title: __('Item_no'), operate: 'LIKE'}, {field: 'item_name', title: __('Item_name'), operate: 'LIKE'}, {field: 'item_desc', title: __('Item_desc'), operate: 'LIKE'}, {field: 'units', title: __('Units'), operate: 'LIKE'}, { field: 'operate', title: __('Operate'), events: { 'click .btn-chooseone': function (e, value, row, index) { // 回传数据给Fast.api.open的callback Fast.api.close({row:row}); }, }, formatter: function () { return ' ' + __('Choose') + ''; }, } ] ] }); // 为表格绑定事件 Table.api.bindevent(table); }, index: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'popup/purchase/itemno/index' + location.search, add_url: 'popup/purchase/itemno/add', edit_url: 'popup/purchase/itemno/edit', del_url: 'popup/purchase/itemno/del', multi_url: 'popup/purchase/itemno/multi', import_url: 'popup/purchase/itemno/import', table: 'bom_item', } }); Form.api.bindevent($("form[role=form]"), function(data, ret){ //这里是表单提交处理成功后的回调函数，接收来自php的返回数据 Fast.api.close(data);//这里是重点 Toastr.success("成功");//这个可有可无 }, function(data, ret){ Toastr.success("失败"); }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'id', fixedColumns: true, fixedRightNumber: 1, searchFormVisible: true, //是否始终显示搜索表单 // commonSearch: false,//快速搜索 singleSelect: true,//多选变为单选 visible: false,//浏览模式(卡片切换)、显示隐藏列、导出、通用搜索全部隐藏 showToggle: false,//浏览模式可以切换卡片视图和表格视图两种模式 showColumns: false,//列，可隐藏不显示的字段 search:false,//快速搜索，搜索框 showExport: false,//导出 columns: [ [ {checkbox: true}, {field: 'item_no', title: __('Item_no'), operate: 'LIKE'}, {field: 'item_name', title: __('Item_name'), operate: 'LIKE'}, {field: 'item_desc', title: __('Item_desc'), operate: 'LIKE'}, {field: 'units', title: __('Units'), operate: 'LIKE'}, // {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate} ] ] }); // 为表格绑定事件 Table.api.bindevent(table); }, recyclebin: function () { // 初始化表格参数配置 Table.api.init({ extend: { 'dragsort_url': '' } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: 'popup/purchase/itemno/recyclebin' + location.search, pk: 'id', sortName: 'id', columns: [ [ {checkbox: true}, {field: 'id', title: __('Id')}, { field: 'deletetime', title: __('Deletetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime }, { field: 'operate', width: '140px', title: __('Operate'), table: table, events: Table.api.events.operate, buttons: [ { name: 'Restore', text: __('Restore'), classname: 'btn btn-xs btn-info btn-ajax btn-restoreit', icon: 'fa fa-rotate-left', url: 'popup/purchase/itemno/restore', refresh: true }, { name: 'Destroy', text: __('Destroy'), classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit', icon: 'fa fa-times', url: 'popup/purchase/itemno/destroy', refresh: true } ], formatter: Table.api.formatter.operate } ] ] }); // 为表格绑定事件 Table.api.bindevent(table); }, add: function () { Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller; });控制器 |
【本文地址】
今日新闻 |
推荐新闻 |