傳值到介面,生成一個下拉框
阿新 • • 發佈:2018-12-12
得到一個裝港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=\"\">pleaseselect 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(); } });