样式:
核心代码:
一、弹窗的控制器中:
// 定义一个公共函数select(),如果这个请求是Ajax,则返回index()函数,否则返回view对象的fetch()函数。
public function select()
{
if ($this->request->isAjax()) {
return $this->index();
}
return $this->view->fetch();
}
二、弹窗的页面样式,新增的页面select.html(位置同add.html一致)
<div class="panel panel-default panel-intro">
<div class="panel-body no-padding">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<table id="table" class="table table-striped table-bordered table-hover table-nowrap">
</table>
</div>
</div>
</div>
</div>
</div>
三、弹窗对应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 '<a href="javascript:;" class="btn btn-danger btn-chooseone btn-xs"><i class="fa fa-check"></i> ' + __('Choose') + '</a>';
},
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
四、新增页面的前端展示
样式:
给'料号'增加点击出现弹窗的功能,
增加回传值要用到的id,①id="item_no<%=index+1%>";②id="item_name<%=index+1%>";③id="item_desc<%=index+1%>";④id="units<%=index+1%>"
增加需要打开弹窗的地址:data-url="popup/purchase/itemno/select"
class中写入:fachoosetable
增加参数行信息,传给弹窗,以便回传参数数,知道对应的具体行:data-line="<%=index+1%>"
// 料号
<td>
<input type="text" id="item_no<%=index+1%>" data-url="popup/purchase/itemno/select" class="form-control fachoosetable" data-line="<%=index+1%>" name="<%=name%>[<%=index%>][item_no]"/>
</td>
// 料号名称
<td>
<input type="text" class="form-control" id="item_name<%=index+1%>" name="" />
</td>
// 规格型号
<td>
<input type="text" class="form-control" id="item_desc<%=index+1%>" name="" />
</td>
// 单位
<td>
<input type="text" class="form-control" id="units<%=index+1%>" name="" />
</td>
五、新增页面对应的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
<div class="panel panel-default panel-intro">
<div class="panel-body no-padding">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<table id="table" class="table table-striped table-bordered table-hover table-nowrap">
</table>
</div>
</div>
</div>
</div>
</div>
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 '<a href="javascript:;" class="btn btn-danger btn-chooseone btn-xs"><i class="fa fa-check"></i> ' + __('Choose') + '</a>';
},
}
]
]
});
// 为表格绑定事件
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;
});
控制器
<?php
namespace app\admin\controller\popup\purchase;
use app\common\controller\Backend;
/**
* bom料号维护管理
*
* @icon fa fa-circle-o
*/
class Itemno extends Backend
{
/**
* Itemno模型对象
* @var \app\admin\model\popup\purchase\Itemno
*/
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = new \app\admin\model\popup\purchase\Itemno;
$this->view->assign("statusList", $this->model->getStatusList());
$this->view->assign("soFlagList", $this->model->getSoFlagList());
}
/**
* 选择表格
*/
public function select()
{
if ($this->request->isAjax()) {
return $this->index();
}
return $this->view->fetch();
}
/**
* 默认生成的控制器所继承的父类中有index/add/edit/del/multi五个基础方法、destroy/restore/recyclebin三个回收站方法
* 因此在当前控制器中可不用编写增删改查的代码,除非需要自己控制这部分逻辑
* 需要将application/admin/library/traits/Backend.php中对应的方法复制到当前控制器,然后进行修改
*/
/**
* 查看
*/
public function index()
{
//当前是否为关联查询
$this->relationSearch = false;
//设置过滤方法
$this->request->filter(['strip_tags', 'trim']);
if ($this->request->isAjax()) {
//如果发送的来源是Selectpage,则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$list = $this->model
->where($where)
->order($sort, $order)
->paginate($limit);
foreach ($list as $row) {
$row->visible(['id','item_no','item_name','item_desc','units']);
}
$result = array("total" => $list->total(), "rows" => $list->items());
return json($result);
}
return $this->view->fetch();
}
}
新增页面
add.html
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:2% 5%;">
<div class="row" style="">
<!--部门-->
<label class="control-label col-xs-12 col-sm-1"><span style="color:red;">*</span>{:__('Depart_name')}:</label>
<div class="form-group col-xs-12 col-sm-2">
<!--数据排序-->
<input id="c-depart_name" data-source="setting/basicinformation/departs" data-field="depart_code" data-pagination="true" data-page-size="5" data-order-by="id" data-primary-key="depart_code" class="form-control selectpage" name="row[depart_name]" type="text" placeholder="--请选择部门--">
</div>
<!--需求日期-->
<label class="control-label col-xs-12 col-sm-1"><span style="color:red;">*</span>{:__('Need_time')}:</label>
<div class="form-group col-xs-12 col-sm-2">
<input id="c-need_time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[need_time]" type="text" value="{:date('Y-m-d H:i:s')}">
</div>
<!--订单类型-->
<label class="control-label col-xs-12 col-sm-1"><span style="color:red;">*</span>{:__('Order_type')}:</label>
<div class="form-group col-xs-12 col-sm-2">
<select id="c-order_type" data-rule="required" class="form-control selectpicker" name="row[order_type]">
{foreach name="orderTypeList" item="vo"}
<option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
{/foreach}
</select>
</div>
</div>
<!--备注-->
<div class="row" style="">
<label class="control-label col-xs-12 col-sm-1">{:__('Remark')}:</label>
<div class="form-group col-xs-12 col-sm-5">
<input id="c-remark" class="form-control" name="row[remark]" type="text">
</div>
</div>
<div class="form-group layer-footer">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
</div>
</div>
<!--行-->
<div class="form-group row">
<div>
<!--data-template的值作为行中的id值,才能便于追加行与引用-->
<table class="table fieldlist" data-template="linedetail" data-name="linedetail" id="linetable" >
<thead>
<tr class="info">
<th>行号</th>
<th>工单号</th>
<th>料号<span style="color:red;">*</span></th>
<th>料号名称</th>
<th>规格型号</th>
<th>单位</th>
<th>数量<span style="color:red;">*</span></th>
<th>长</th>
<th>宽</th>
<th>高</th>
<th>重量</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--name中<%=name%>表示的是data-template为此地的id值linedetail,对应的data-name的值linedetail-->
<script id="linedetail" type="text/html">
<tr class="active">
// <%=name%>[<%=index%>][line]表示该编程语言中调用由名称为“name”的变量中的索引为“index”的元素的对应的行号。
//var obj = {'line':'','stockid':'','item_name':'','uom':'','ship_flag':'','need_time':'','quantity':'','price':'','line_amount':'','line_remark':''};
// 行号
<td style="width:75px">
<input type="text" readonly="readonly" class="form-control" name="<%=name%>[<%=index%>][line]" value="1"/>
</td>
// 工单号
<td class="form-group">
<input data-rule="required" type="text" class="form-control" name="<%=name%>[<%=index%>][wip_entity_name]"/>
</td>
// 料号
<td>
<input type="text" id="item_no<%=index+1%>" data-url="popup/purchase/itemno/select" class="form-control fachoosetable" data-line="<%=index+1%>" name="<%=name%>[<%=index%>][item_no]"/>
</td>
// 料号名称
<td>
<input type="text" class="form-control" id="item_name<%=index+1%>" name="" />
</td>
// 规格型号
<td>
<input type="text" class="form-control" id="item_desc<%=index+1%>" name="" />
</td>
// 单位
<td>
<input type="text" class="form-control" id="units<%=index+1%>" name="" />
</td>
// 数量
<td style="width:100px" class="form-group">
<input data-rule="required" id="quantity<%=index+1%>" type="text" class="form-control all_quantity" name="<%=name%>[<%=index%>][quantity]"/>
</td>
// 长
<td>
<input type="text" class="form-control" name="<%=name%>[<%=index%>][chang]" />
</td>
// 宽
<td>
<input type="text" class="form-control" name="<%=name%>[<%=index%>][kuan]" />
</td>
// 高
<td>
<input type="text" class="form-control" name="<%=name%>[<%=index%>][gao]" />
</td>
// 重量
<td>
<input type="text" class="form-control" name="<%=name%>[<%=index%>][weight]" />
</td>
// 备注
<td>
<input type="text" class="form-control" name="<%=name%>[<%=index%>][remark]"/>
</td>
//请购单号
<td style="display:none">
<input type="hidden" class="form-control" name="<%=name%>[<%=index%>][pr_num]"/>
</td>
<td>
<span class="btn btn-sm btn-danger btn-removeline"><i class="fa fa-times"></i></span>
</td>
</tr>
</script>
</tbody>
<tr>
<td colspan="1"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plas"></i>添加行</a></td>
<td colspan="6">{:__('总计数量')}:<input id="all_quantity" type="text" name="all_quantity" readonly="readonly" style="width:80px;border-width:0px"/></td>
</tr>
</table>
<!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
<textarea id="textarea1" name="linedetail" class="form-control hidden" cols="30" rows="5"></textarea>
</div>
</div>
</form>
js
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'purchase/purchasefunction/purchaserequisition/index' + location.search,
add_url: 'purchase/purchasefunction/purchaserequisition/add',
edit_url: 'purchase/purchasefunction/purchaserequisition/edit',
del_url: 'purchase/purchasefunction/purchaserequisition/del',
multi_url: 'purchase/purchasefunction/purchaserequisition/multi',
import_url: 'purchase/purchasefunction/purchaserequisition/import',
table: 'purchase_pr_headers',
}
});
//修改新增页面的大小
$(".btn-add").data("area", ["80%","90%"]);//为选择器为".btn-add"的元素设置一个data属性"area",值为["90%","90%"]。
//修改编辑页面的大小
$(".btn-edit").data("area", ["80%","90%"]);//为选择器为".btn-edit"的元素设置一个data属性"area",值为["90%","90%"]。
//修改表格中编辑按钮弹出页面的大小
$(document).on('post-body.bs.table', function (e, settings, json, xhr) {
$(".btn-editone").data("area", ["80%", "90%"]);
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
fixedColumns: true,
fixedRightNumber: 2,
columns: [
[
{checkbox: true},
{field: 'pr_num', title: __('Pr_num'), operate: 'LIKE'},
{field: 'status', title: __('Status'), searchList: {"0":__('Status 0'),"1":__('Status 1'),"2":__('Status 2'),"3":__('Status 3')}, formatter: Table.api.formatter.status},
{field: 'need_time', title: __('Need_time'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
{field: 'approve_by', title: __('Approve_by'), operate: 'LIKE'},
{field: 'approve_time', title: __('Approve_time'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
{field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
{field: 'depart_name', title: __('Depart_name'), operate: 'LIKE'},
{field: 'order_type', title: __('Order_type'), searchList: {"0":__('Order_type 0'),"1":__('Order_type 1')}, formatter: Table.api.formatter.normal},
//查看
{field: 'id', title: __('detial'), table: table,
buttons:
[
{
name: 'name1',
text:__('detials'),
title: __('detials'),
icon: 'fa fa-list',//图标
classname: 'btn btn-xs btn-primary btn-dialog', //btn-dialog表示为弹窗
url: 'popup/purchase/prline/index?pr_num={pr_num}',//自带参数ids
extend: 'data-area=\'["75%","75%"]\'',//弹窗大小
callback:function(data){}
},
], operate:false, formatter: Table.api.formatter.buttons
},
{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: 'purchase/purchasefunction/purchaserequisition/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: 'purchase/purchasefunction/purchaserequisition/restore',
refresh: true
},
{
name: 'Destroy',
text: __('Destroy'),
classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit',
icon: 'fa fa-times',
url: 'purchase/purchasefunction/purchaserequisition/destroy',
refresh: true
}
],
formatter: Table.api.formatter.operate
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
// add: function () {
// Controller.api.bindevent();
// },
add: function () {
// 日期检查,光标移开执行
$(document).on("blur",".datetimepicker",function(){
//console.info("日期检查");
// 获取当前日期,时间戳
var date = new Date();
// 添加分隔符“-”
var seperator = "-";
//获取input内需求日期
var need_date = new Date($('#c-need_time').val());
// 获取今天的年月日
var year = date.getFullYear();
var month = date.getMonth() + 1;//返回的是月份序号0-11需要+1才是月份
var today = date.getDate();
// 对月份进行处理,1-9月在前面添加一个“0”
if (month >= 1 && month <= 9) {
month = "0" + month;
}
// 对日期进行处理,1-9号在前面添加一个“0”
if (today >= 0 && today <= 9) {
today = "0" + today;
}
// 最后拼接字符串,得到一个格式为(yyyy-MM-dd)的日期
var nowDate = date.getFullYear() + seperator + month + seperator + today;
//转换为时间戳
var now_date = new Date(nowDate);
// 检查日期是否小于今天,是则弹窗提示
if(need_date<now_date){
layer.alert("需求日期不可以小于今天!");
$('#c-need_time').val(nowDate);//需求日期回到今天的日期
}
});
//光标移开class为all_quantity对应的文本框,计算总数量
$(document).on("blur",".all_quantity",function(){
var all_quantity = 0;//设置变量all_quantity为0
var shuliang = 0;
for(var i = 1;i<50;i++){
//获取单行的数量
shuliang = $('#quantity' + i).val();
if(shuliang == ""){
shuliang = 0;
}
else if(Number(shuliang) >0){
//大于零的话,总数量就等于初始的总数量加上当前行的数量
all_quantity = Number(all_quantity) + Number(shuliang);
}
}
//总数量的值就是经过循环计算出来的值
$('#all_quantity').val(all_quantity);
});
// 是指在前端模板中通过参数 "Fast" 引用后端代码中的 Fast 函数,用于前后端的交互
Template.helper("Fast", Fast);
//用于追加行的实现,追加行之后,行值发生改变
//fa.event.appendfieldlist事件是指,当用户在确认框的输入框中添加新字段时触发的事件
//当在文档上发生fa.event.appendfieldlist事件时,为id为linetable的元素中class为btn-append的元素绑定一个函数,该函数接受e和obj两个参数。
$(document).on("fa.event.appendfieldlist", "#linetable .btn-append", function (e, obj) {
//绑定动态下拉组件,触发下拉列表功能,解决不会被渲染的问题
Form.events.selectpage(obj);
//绑定日期组件,触发日期选择功能
Form.events.datetimepicker(obj);
//判断id下linetable的长度
var len = $('#linetable tr').length;
//console.info(len);
for (var i = 1; i < len - 1; i++) {
$('#linetable tr:eq(' + i + ') td:first').find('input').val(i);
//查找id为table的表格内索引为i的行中的第一个单元格,然后将索引i设置为文本内容。
//tr:eq(' + i + ') 是一个用于选择HTML元素的jQuery选择器,意思是选取序号为i的表格行(table row)。
}
//选择页面弹窗
//选择所有具有"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;
});
}
}
});
//自定义删除事件
//目前仅添加了动态更新行号,判断是否为最后一条数据并抛出异常,删除实际在上述click事件中进行,由于处在源文件中且点击按钮后两个方法均会运行目前未修改完成
$(document).on("click", ".btn-removeline", function () {
if ($('#linetable tr').length == 3) {
// alert(__("Can't delete"));
// return false;
Toastr.info("这是最后一条了!");
throw new Error('Generated error manually to stop execution of script');
}
// 先找到最近的具有“fieldlist”类的元素,这里则是html中的table,将其赋值给变量container;
var container = $(this).closest(".fieldlist");
//定义一个tagName,先去寻找container中是否有data-tag(同data-name,data-template),如果没有就判断container是否是一个table,如果是tagName的值为tr,否则为dd
var tagName = container.data("tag") || (container.is("table") ? "tr" : "dd");
//找到最近的具有tagName标签(这里即tr)
$(this).closest(tagName).remove();
//refresh(container);
Toastr.info("删除成功!");
//设置行号的值
var len = $('#linetable tr').length;
//console.info(len);
for (var i = 1; i < len - 1; i++) {
$('#linetable tr:eq(' + i + ') td:first').find('input').val(i);
//查找id为table的表格内索引为i的行中的第一个单元格,然后将索引i设置为文本内容。
//tr:eq(' + i + ') 是一个用于选择HTML元素的jQuery选择器,意思是选取序号为i的表格行(table row)。
}
//执行删除的时候总数进行变更
var all_quantity = 0;//设置变量all_quantity为0
var shuliang = 0;
for(var j = 1;j<50;j++){
//获取单行的数量
shuliang = $('#quantity' + j).val();
if(shuliang == ""){
shuliang = 0;
}
else if(Number(shuliang) >0){
//大于零的话,总数量就等于初始的总数量加上当前行的数量
all_quantity = Number(all_quantity) + Number(shuliang);
}
}
//总数量的值就是经过循环计算出来的值
$('#all_quantity').val(all_quantity);
});
//因为日期选择框不会触发change事件,导致无法刷新textarea,所以加上判断
$(document).on("dp.change", "#add-form .datetimepicker", function () {
// 触发当前元素的父元素的上一个元素的input的change事件。
$(this).parent().prev().find("input").trigger("change");
});
var len = $('#linetable tr').length - 1;//寻找id为table的表格tr的长度(即寻找在表格table下的tr的个数)-1(除去表头)
var lens = len - 2;//减二的目的是减去第一行固定行和最后一行总计行(保留两行)
//选择行料号,自动带出料号相关信息
// $('#linedetail #item_no').data("eSelect",function(data){
// alert("111")
// // for(var i = 1; i < 50; i++){
// // //求出每行的item_no值
// // var item_no = $('#item_no' + i).val();
// // if(item_no == ""){
// // }
// // else{
// // $('#item_name'+ i).val(data.item_name);//将id为c-customer_contact的值更改为控制器中的customer_contacts
// // $('#item_desc'+ i).val(data.item_desc);//币别
// // $('#units'+ i).val(data.units);//币别
// // }
// // }
// });
Controller.api.bindevent();
// //选择,自动带出客户相关信息
// $('#c-customer_code').data("eSelect",function(data){//对需要改变的数据进行监听,如果选中id为c-customer_code的值,就更改下面的值
// $('#c-customer_contact').val(data.customer_contacts);//将id为c-customer_contact的值更改为控制器中的customer_contacts
// $('#c-currency_code').val(data.currency_code);//币别
// $('#c-ship_address').val(data.customer_address);//出货地址
// $('#c-yewu').val(data.employee_num);//业务员
// $('#c-yewu').selectPageRefresh();//刷新下拉列表以显示选项
// // $('#c-tax_name').val(data.tax_name);//税别
// // $('#c-tax_name').selectPageRefresh();//刷新下拉列表以显示选项
// $('#c-tax_flag').selectpicker('val', data.tax_flag);//是否含税
// $('#c-term_name').val(data.term_name);//付款条件
// $('#c-term_name').selectPageRefresh();//刷新下拉列表以显示选项
// });
//选择税别带出税率
// $('#c-tax_name').data("eSelect",function(data){//对需要改变的数据进行监听,如果选中id为c-tax_name的值,就更改下面的值
// $('#c-tax_rate').val(data.tax_mount);//将id为c-tax_rate的值更改为控制器中的tax_mount
// });
//表单selectpage动态渲染,打开页面后仅渲染一次。通过js添加的selectpage需要手动触发渲染
Form.events.selectpage($('#add-form'));
// 实现提交表单之后不关闭弹窗
// Form.api.bindevent($("form"), function(data,ret){
// //成功的回调,如果返回false,将不会出现提示消息
// // Toastr.success("生成成功");
// //return false;//这行代码阻止弹框关闭
// }, function(data, ret){
// //失败的回调,如果返回false,将不会出现提示消息
// }, function(success, error){
// //如果返回falsle,将阻止表单的提交
// //如果处理成功后我们可以使用Form.api.submit(this, success, error);再次提交表单
// });
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});