得到一个装港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\">\n" + " <option value=\"\">please select loadingPortId or portId</option>\n" + " <option value=\""+portId+"\">portId: "+portId+"</option>\n" + " </select>" ); }else{ $("#portParentId").append( "<select class=\"form-control\" id=\"portId\">\n" + " <option value=\"\">please select loadingPortId or portId</option>\n" + " <option value=\""+loadingPortId+"\">loadingPortId: "+loadingPortId+"</option>\n" + " <option value=\""+portId+"\">portId: "+portId+"</option>\n" + " </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;\">\n" + "\t\t\t\t\t\t\t<div class=\"panel-heading\">\n" + "\t\t\t\t\t\t\t\t<i class=\"icon-list\"></i>Actual information\n" + "\t\t\t\t\t\t\t\t<!-- <span class=\"ml30\"><a class=\"btn btn-sm btn-success js-select-model\" id=\"addRepairContent1\">Add</a></span>-->\n" + "\t\t\t\t\t\t\t</div>\n" + "\t\t\t\t\t\t</div>\n" + "\t\t\t\t\t\t<div class=\"divws\">\n" + "\t\t\t\t\t\t\t<table id=\"mytableo\" class=\"table table-bordered table-hover\">\n" + "\t\t\t\t\t\t\t\t<thead>\n" + "\t\t\t\t\t\t\t\t<tr>\n" + "\t\t\t\t\t\t\t\t\t<th>seq</th>\n" + "\t\t\t\t\t\t\t\t\t<th>voyage_id</th>\n" + "\t\t\t\t\t\t\t\t\t<th>voyage_goods_subid</th>\n" + "\t\t\t\t\t\t\t\t\t<th>port_id</th>\n" + "\t\t\t\t\t\t\t\t\t<th>material_id</th>\n" + "\t\t\t\t\t\t\t\t\t<th>fact_quantity</th>\n" + "\t\t\t\t\t\t\t\t\t<th>operation</th>\n" + "\t\t\t\t\t\t\t\t</tr>\n" + "\t\t\t\t\t\t\t\t</thead>\n" + "\t\t\t\t\t\t\t\t<tbody class=\"itemo\">\n" + "\t\t\t\t\t\t\t\t</tbody>\n" + "\t\t\t\t\t\t\t</table>\n" + "\t\t\t\t\t\t</div>\n" + "\t\t\t\t\t <div class=\"mytable-page-navs\"></div>\n" + "\t\t\t\t\t <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(); } });