得到一个装港id和卸港id,然后在界面的生成一个下拉框,这个很简单的。但是不熟练,记一下,下次直接复制。
var portId = obj.children('td').eq(5).html()+"";//卸港id
var loadingPortId = obj.children('td').eq(4).html()+"";//装港id
卸港id,一般都是有的。所以我只判断装港是否为空
$("#portParentId").empty(); if (loadingPortId ==null || loadingPortId ==""){ $("#portParentId").append( "<select class="form-control" id="portId"> " + " <option value="">please select loadingPortId or portId</option> " + " <option value=""+portId+"">portId: "+portId+"</option> " + " </select>" ); }else{ $("#portParentId").append( "<select class="form-control" id="portId"> " + " <option value="">please select loadingPortId or portId</option> " + " <option value=""+loadingPortId+"">loadingPortId: "+loadingPortId+"</option> " + " <option value=""+portId+"">portId: "+portId+"</option> " + " </select>" ); }
生成之后,还要去选择装港id,和卸港id,如果没有选择的话呢,就要提示,这个提示,我忘记了,艹等会加上。
选择装港id就不生成航次货物的表格,选择卸港生成航次货物的表格。
这就要监听下拉框了,贴一下js:
$("#portId").change(function () { if ($("#portId option:selected").html().substring(0,6) == "portId" ) { $("#ActualInformation").append( "<div class="panel" style="margin-bottom: 0;"> " + " <div class="panel-heading"> " + " <i class="icon-list"></i>Actual information " + " <!-- <span class="ml30"><a class="btn btn-sm btn-success js-select-model" id="addRepairContent1">Add</a></span>--> " + " </div> " + " </div> " + " <div class="divws"> " + " <table id="mytableo" class="table table-bordered table-hover"> " + " <thead> " + " <tr> " + " <th>seq</th> " + " <th>voyage_id</th> " + " <th>voyage_goods_subid</th> " + " <th>port_id</th> " + " <th>material_id</th> " + " <th>fact_quantity</th> " + " <th>operation</th> " + " </tr> " + " </thead> " + " <tbody class="itemo"> " + " </tbody> " + " </table> " + " </div> " + " <div class="mytable-page-navs"></div> " + " <div class="clearfix"></div>" ); var mytable = new DataTable({ id:".divws", pageNavId : ".mytable-page-nav1", url:$('body').attr('plmsctx')+"/voyageInformation/detailVoyageGoods", params : { voyageId : voyageId }, pageInterval:10, columns : [ { field : "idx", title : "seq", width : "5%", format : function(val, row, i) { return i + 1; } }, { field : "id", title : "ID", hide : true }, { field : "voyageId", title : "voyage_id" }, { field : "voyageGoodsSubid", title : "voyage_goods_subid" } , { field : "portId", title : "port_id" } , { field : "materialId", title : "material_id" } , { field : "", title : "factQuantity", edit:true }] }); mytable.init(); }else{ $("#ActualInformation").empty(); } });