欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于前台页面js的一些 知识

程序员文章站 2024-03-14 18:40:52
...


在jqGrid中前面勾选按钮的时间

全选事件

 onSelectAll:function(aRowids,status) {

                    var _this = this;
                    if(status){
                        item_selected = _.union(item_selected, aRowids);
                        $("#numbertext").show();
                        $("#number").text(item_selected.length)
                        
                        
                    }else{
                        item_selected = _.difference(item_selected, aRowids);
                        
                        $("#number").text(item_selected.length);
                        
                    } 
                },
                //单选按钮选中单条数据事件
                beforeSelectRow:function(rowid, e) {
                    var _this = this;
                 
                    var index = _.indexOf(item_selected, rowid);
                    if(index==-1){
                        item_selected.push(rowid);
                        $("#numbertext").show();
                        $("#number").text(item_selected.length);
                    }
                    else{
                        item_selected = _.pull(item_selected, rowid);
                        $("#number").text(item_selected.length);
                    }

                },

遍历元素 表格下面的input框 type为 checkbox的所有组件

$("#table_list_1 input[type|=checkbox]").each(function(){

            var id=this.id;      

       $(this).attr('checked','checked');                        为当前input框设置全选


             item_selected.push(id.substring(17));
             })

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

<!DOCTYPE html>
<html>
<head>
    
   	<#include "/common/common-css.html"/>
   	

    <title>运单管理</title>
    
    <style>
    	.ui-jqgrid-hbox{width:100%;}
		.ui-jqgrid-htable{width:100% !important;}
		#table_list_1,#table_list_2,#table_list_3,#table_list_4{width:100% !important;color: #666;}
/* 		#pager_list_1,#pager_list_2,#pager_list_3,#pager_list_5{height: 50px;} */
		#gbox_table_list_1,#gview_table_list_1,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_1{width:100% !important;}
		#gbox_table_list_2,#gview_table_list_2,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_2{width:100% !important;}
		#gbox_table_list_3,#gview_table_list_3,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_3{width:100% !important;}
		#gbox_table_list_4,#gview_table_list_4,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_4{width:100% !important;}
    </style>
    
</head>

<body class="payment-details">
        <!-- page-heading -->
        <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>业务管理——运单管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a onclick="index()">业务管理</a>
                        </li>
                        <li class="active">
                            <strong>运单管理</strong>
                        </li>
                    </ol>
                </div>
        </div>
        
        <div class="list-waybill">
		        
		        <div class="wrapper wrapper-content  animated fadeInRight">
		        
		        
		        <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a id="clickTab1" data-toggle="tab" href="#tab-1"> 待装车</a></li>
                            <li class=""><a id="clickTab2" data-toggle="tab" href="#tab-2">运输中</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                	<!-- 查询条件 -->
							        <div  class="query-criteria" style="background: #fff; margin: 0; padding: 0; padding-top: 0px; padding-bottom: 10px;"> 
								        <form id="queryForm">
								        		<input name="waybillId" id="waybillIdQuery" type="text" placeholder="承运单号" class="form-control input-text">
	                                    		<select name="sendWay" id="sendWayQuery" class="form-control">
	                                    			<option value="">-发货方式-</option>
		                                         	<option value="pick_up">上门提货</option>
		                                         	<option value="by_oneself">自送站点</option>
		                                    	</select>
		                                    	<select name="deliveryWay" id="deliveryWayQuery" class="form-control">
		                                    		<option value="">-送货方式-</option>
	                                         		<option value="pick_up">到站自提</option>
	                                         		<option value="home_delivery">送货上门</option>
	                                    		</select>
	                                    		<select name="insure" id="insureQuery" class="form-control">
	                                    			<option value="">-是否投保-</option>
	                                        	 	<option value="1">是</option>
	                                        	 	<option value="2">否</option>
	                                    		</select>
	                                    		<select name="receiptWay" id="receiptWayQuery" class="form-control">
	                                    			<option value="">-回单方式-</option>
	                                        	 	<option value="elec">电子回单</option>
	                                        	 	<option value="paper">纸质回单</option>
	                                    		</select>
	                                    		<select name="freightSettleWay" id="freightSettleWayQuery" class="form-control">
	                                    			 <option value="">-结算方式-</option>
			                                         <option value="cash">现金</option>
			                                         <option value="receipt">回付</option>
			                                         <option value="monthly">月结</option>
			                                         <option value="collect">到付</option>
	                                    		</select>
<!-- 								        		<div class="form-group" id="data_5"> -->
<!-- 					                                <div class="input-daterange input-group" id="datepicker"> -->
<!-- 					                                    <input type="text" class="input-sm form-control" name="start" placeholder="下单时间" value=""/> -->
<!-- 					                                    <span class="input-group-addon">至</span> -->
<!-- 					                                    <input type="text" class="input-sm form-control" name="end" placeholder="下单时间" value="" /> -->
<!-- 					                                </div> -->
<!-- 					                            </div> -->
							                <button id="btnQuery" type="button">查询</button>
							            </form>
							        </div>
                                    <!-- 表格 -->
						            <div class="row">
						                <div class="col-lg-12">
						                    <div class="ibox ">
						                        <div class="ibox-content" style="padding: 15px 0px 0px 0px;">
						                        	<div class="jqGrid_wrapper">
						                        		<table id="table_list_1"></table>
						                                <div id="pager_list_1"></div>
						                            </div>
						                        </div>
						                    </div>
						                </div>
						            </div>
						            <div class="derive" style="bottom: 46px;">
		                 				<button id="btnWaybillAdd" type="button">新增</button>
		                 				<button id="entrucking" type="button">一键装车<span id="numbertext" style="display: none">(<span id="number"></span>单)</span></button>
		                 				<span id="num" style="display: none"></span>
		            				</div>
		            				
		            				
		            				
                                </div>
                            </div>
                            
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                <!-- 查询条件 -->
							        <div  class="query-criteria" style="background: #fff; margin: 0; padding: 0; padding-top: 0px; padding-bottom: 10px;"> 
								        <form id="queryForm2">
								        		<input name="waybillId" id="waybillIdQuery2" type="text" placeholder="承运单号" class="form-control input-text">
	                                    		<select name="sendWay" id="sendWayQuery2" class="form-control">
	                                    			<option value="">-发货方式-</option>
		                                         	<option value="pick_up">上门提货</option>
		                                         	<option value="by_oneself">自送站点</option>
		                                    	</select>
		                                    	<select name="deliveryWay" id="deliveryWayQuery2" class="form-control">
		                                    		<option value="">-送货方式-</option>
	                                         		<option value="pick_up">到站自提</option>
	                                         		<option value="home_delivery">送货上门</option>
	                                    		</select>
	                                    		<select name="insure" id="insureQuery2" class="form-control">
	                                    			<option value="">-是否投保-</option>
	                                        	 	<option value="1">是</option>
	                                        	 	<option value="2">否</option>
	                                    		</select>
	                                    		<select name="receiptWay" id="receiptWayQuery2" class="form-control">
	                                    			<option value="">-回单方式-</option>
	                                        	 	<option value="elec">电子回单</option>
	                                        	 	<option value="paper">纸质回单</option>
	                                    		</select>
	                                    		<select name="freightSettleWay" id="freightSettleWayQuery2" class="form-control">
	                                    			 <option value="">-结算方式-</option>
			                                         <option value="cash">现金</option>
			                                         <option value="receipt">回付</option>
			                                         <option value="monthly">月结</option>
			                                         <option value="collect">到付</option>
	                                    		</select>
							                <button id="btnQuery2" type="button">查询</button>
							            </form>
							        </div>
								        <!-- 表格 -->
						            <div class="row">
						                <div class="col-lg-12">
						                    <div class="ibox ">
						                        <div class="ibox-content" style="padding: 15px 0px 0px 0px;">
						                        	<div class="jqGrid_wrapper">
						                        		<table id="table_list_2"></table>
						                                <div id="pager_list_2"></div>
						                            </div>
						                        </div>
						                    </div>
						                </div>
						            </div>
                                </div>
                            </div>
                        </div>


                </div>
		        
		
		        </div>
		</div>
		
		
		<#include "/common/common-js.html"/>
    
    <script>
    var item_selected = new Array();
        $(document).ready(function () {
            // Examle data for footable
            // Configuration for jqGrid Example 1
            $("#table_list_1").jqGrid({
            	url:"${request.contextPath}/waybill/waybillList?status=10",
                datatype: "json",
                height: 367,
                autowidth: false,
                width:2000,
                shrinkToFit: true,
                autoScroll: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                colNames: ['承运单号','下单时间','运单状态','货物','件数','重量','体积','发货人','发货人电话','发货人地址','收货人','收货人电话','收货人地址','结算方式','结算金额','操作'],
                colModel: [
                	{name: 'waybillId', index: 'waybillId', width: 10,sortable:false,key:true},
                	{name: 'createTime', index: 'createTime', width: 10 ,sortable:false,formatter: formatterDate},
                    {name: 'status', index: 'status', width: 4 ,sortable:false,formatter: formatterStatus},
                    {name: 'cargoName', index: 'cargoName', width: 8 ,sortable:false},
                    {name: 'numberOfPackages', index: 'numberOfPackages', width: 3 ,sortable:false},
                    {name: 'weight', index: 'weight', width: 3 ,sortable:false},
                    {name: 'volume', index: 'volume', width: 3 ,sortable:false},
                    {name: 'consignor', index: 'consignor', width: 5 ,sortable:false},
                	{name: 'consignorMobile', index: 'consignorMobile', width: 8, sortable:false},
                	{name: 'consignorAddress', index: 'consignorAddress', width: 20 ,sortable:false,formatter: formatterConsignorAddress},
                    {name: 'consignee', index: 'consignee', width: 5 ,sortable:false},
                    {name: 'consigneeMobile', index: 'consigneeMobile', width: 8 ,sortable:false},
                    {name: 'consigneeAddress', index: 'consigneeAddress', width: 20 ,sortable:false,formatter: formatterConsigneeAddress},
                	{name: 'freightSettleWay', index: 'freightSettleWay', width: 5,sortable:false,formatter: formatterSettleWay},
                	{name: 'settleAmount', index: 'settleAmount', width: 8 ,sortable:false,formatter: formatterMoney},
                    {name: 'act', index: 'act', width: 8 ,sortable:false,formatter: formatterDelete},
                ],
                pager: "#pager_list_1",
                gridComplete:function() {
                    var _this = this;
                    if(item_selected.length>0){
                        for (var i = 0; i < item_selected.length; i++) {
                            $(_this).jqGrid('setSelection',item_selected[i]);
                        } 
//                         console.info(item_selected);
                    }
                },
                
                onSelectAll:function(aRowids,status) {
                    var _this = this;
                    if(status){
                        item_selected = _.union(item_selected, aRowids);
                        $("#numbertext").show();
                        $("#number").text(item_selected.length)
                        
                        
                    }else{
                        item_selected = _.difference(item_selected, aRowids);
                        
                        $("#number").text(item_selected.length);
                        
                    } 
                },
                //单选按钮选中单条数据事件
                beforeSelectRow:function(rowid, e) {
                    var _this = this;
                 
                    var index = _.indexOf(item_selected, rowid);
                    if(index==-1){
                        item_selected.push(rowid);
                        $("#numbertext").show();
                        $("#number").text(item_selected.length);
                    }
                    else{
                        item_selected = _.pull(item_selected, rowid);
                        $("#number").text(item_selected.length);
                    }
                },
                rownumbers: true,
                multiselect: true,
                viewrecords: true,
                hidegrid: false
            });
            
            
            $("#table_list_2").jqGrid({
            	url:"${request.contextPath}/waybill/waybillList?status=20",
            	datatype: "json",
                height: 367,
                autowidth: true,
                shrinkToFit: true,
                autoScroll: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                colNames: ['承运单号','下单时间','运单状态','货物','件数','发货人','发货人电话','发货人地址','收货人','收货人电话','收货人地址','结算方式','结算金额','操作'],
                colModel: [
                	{name: 'waybillId', index: 'waybillId', width: 12,sortable:false},
                	{name: 'createTime', index: 'createTime', width: 12 ,sortable:false,formatter: formatterDate},
                    {name: 'status', index: 'status', width: 5 ,sortable:false,formatter: formatterStatus},
                    {name: 'cargoName', index: 'cargoName', width: 8 ,sortable:false},
                    {name: 'numberOfPackages', index: 'numberOfPackages', width: 5 ,sortable:false},
                    {name: 'consignor', index: 'consignor', width: 5 ,sortable:false},
                	{name: 'consignorMobile', index: 'consignorMobile', width: 8, sortable:false},
                	{name: 'consignorAddress', index: 'consignorAddress', width: 20 ,sortable:false,formatter: formatterConsignorAddress},
                    {name: 'consignee', index: 'consignee', width: 5 ,sortable:false},
                    {name: 'consigneeMobile', index: 'consigneeMobile', width: 8 ,sortable:false},
                    {name: 'consigneeAddress', index: 'consigneeAddress', width: 20 ,sortable:false,formatter: formatterConsigneeAddress},
                	{name: 'freightSettleWay', index: 'freightSettleWay', width: 5,sortable:false,formatter: formatterSettleWay},
                	{name: 'settleAmount', index: 'settleAmount', width: 8 ,sortable:false,formatter: formatterMoney},
                    {name: 'act', index: 'act', width: 10 ,sortable:false,formatter: formatterDelete},
                ],
                pager: "#pager_list_2",
                //回显
         
                rownumbers: true,
                multiselect: true,
                viewrecords: true,
                hidegrid: false
            });
            
            
            // Add responsive to jqGrid
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width();
                $('#table_list_1').setGridWidth(width);
                $('#table_list_2').setGridWidth(width);
                
            });
            

            setTimeout(function(){
                $('.wrapper-content').removeClass('animated fadeInRight');
            },700);

            $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
        });
        
        
        //标签页切换时表格对齐
        $("#clickTab1").on("click", function () {
        	var width = $('.jqGrid_wrapper').width();
        	$('#table_list_1').setGridWidth(width);
        });
        $("#clickTab2").on("click", function () {
        	var width = $('.jqGrid_wrapper').width();
        	$('#table_list_2').setGridWidth(width);
        	$('#sumNum').val("6");
        });
        
      	//点击查询按钮重新查询
        $("#btnQuery").on("click", function () {
                 $("#table_list_1").jqGrid('setGridParam', {
                     datatype: 'json',
                     postData: getGridParam("#queryForm"), //发送数据
                     page: 1
                 }).trigger("reloadGrid"); //重新载入
             });
      	
        $("#btnQuery2").on("click", function () {
            $("#table_list_2").jqGrid('setGridParam', {
                datatype: 'json',
                postData: getGridParam("#queryForm2"), //发送数据
                page: 1
            }).trigger("reloadGrid"); //重新载入
        });
        
        
        function getGridParam(id) {
            //定义参数数据集合
            var parm = {};
            //获取表单里面的所有数据进行组装条件查询
            $.each($(id).serializeArray(), function (index, obj) {
                var key = $.trim(obj.name);
                var val = $.trim(obj.value);
                //控件数值为字符串空情况不考虑在内
                parm[key] = val
            });
            return parm;
        }
        
        $("#btnWaybillAdd").on("click", function () {
         	window.open('Add','_self');
    	});
        
        
      //装车点击事件
        $("#entrucking").on("click", function () {
        	var num=$("#num").text();
        	var numbers=$("#number").text();
        	if(num == null || num == ""){
        		
        		//判断是否有值 没有值就直接全选
            	var number=$("#number").text();
            	if(number == null || number == ""){
            		
            		$("#num").text("2");
            		$("#numbertext").show();
            		$("#table_list_1 input[type|=checkbox]").each(function(){
            			var id=this.id;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
            			$(this).attr('checked','checked');
            			item_selected.push(id.substring(17));
            		})
                    
            	}else{
            		
            		if(numbers == 0){
            			return;
            		}
            		//勾选的事件
            		layer.open({
                        type: 2,
                        title: '装车单',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '90%'],
                        content: '${request.contextPath}/loading/findviews?item_selected='+item_selected
                    }); 
            		return;
            		
            	}
            	$("#number").text(item_selected.length);
        		
        	}else{
        		if(numbers == 0){
        			return;
        		}
        		layer.open({
                    type: 2,
                    title: '装车单',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['100%', '90%'],
                    content: '${request.contextPath}/loading/findviews?item_selected='+item_selected
                }); 
        		
        	}
        	
 	

    	});
        

        
      //金额保留两位小数
        function formatterMoney(cellvalue, options, row) {
            var money = cellvalue.toFixed(2);
           	return money;
        }
      
        
      	//发货人地址拼接
        function formatterConsignorAddress(cellvalue, options, row) {
            var address = row.consignorProv + row.consignorCity + row.consignorDistrict + cellvalue;
           	return address;
        }
      	
      //收货人地址拼接
        function formatterConsigneeAddress(cellvalue, options, row) {
            var address = row.consigneeProv + row.consigneeCity + row.consigneeDistrict + cellvalue;
           	return address;
        }
        
        //运单状态
        function formatterStatus(cellvalue, options, row) {
            if (cellvalue == "10") {
                return "已揽货";
            } else if (cellvalue == "20") {
                return "运输中";
            } else if (cellvalue == "60") {
                return "派件中";
            } else if (cellvalue == "90") {
                return "已签收";
            } else {
                return "--";
            }
        }
        
      	//结算方式
        function formatterSettleWay(cellvalue, options, row) {
            if (cellvalue == "cash") {
                return "现金";
            } else if (cellvalue == "receipt") {
                return "回付";
            } else if (cellvalue == "monthly") {
                return "月结";
            } else if (cellvalue == "collect") {
                return "到付";
            } else {
                return "--";
            }
        }
        
        
        function formatterDelete(cellvalue, options, row){
        	var selectHtml="<a class=\"btn btn-primary btn-xs\" href=\"javascript:void(0)\" onclick=\"detailWaybill('"+row.waybillId+"')\">详情</a>"
        				+ " <a class=\"btn btn-primary btn-xs\" href=\"javascript:void(0)\" onclick=\"deleteWaybill('"+row.waybillId+"')\">删除</a>";
        	return selectHtml;
        }
        
        
      //详情按钮
        function detailWaybill(waybillId){
      	  
        	window.open('detail?waybillId='+waybillId,'_self');
      	  
        }
        
      //删除按钮
        function deleteWaybill(waybillId){
      	  
      	  var r=confirm("是否删除?");
      	  if (r==true){
	      	  $.ajax({
	         	  type: "POST",
	         	  data:{"waybillId":waybillId},
	                  url: "${request.contextPath}/waybill/waybillDelete",
	                  dataType: "json",
	                  success: function (flag) {
	                  	if(flag){
	                  		$("#table_list_1").jqGrid('setGridParam', {
	                            datatype: 'json',
	                            postData: getGridParam("#queryForm"), //发送数据
	                            page: 1
	                        }).trigger("reloadGrid"); //重新载入
	                  	}
	                  },
	                  error: function () {
	                  	
	                  }
	           })
      	  }
      	  
        }
      
      
        //日期转换
        function formatterDate(cellvalue, options, row) {
        	var oldTime = (new Date(cellvalue)).getTime();
        	var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
        	return curTime
        }
      
        Date.prototype.format = function(fmt) { 
            var o = { 
               "M+" : this.getMonth()+1,                 //月份 
               "d+" : this.getDate(),                    //日 
               "h+" : this.getHours(),                   //小时 
               "m+" : this.getMinutes(),                 //分 
               "s+" : this.getSeconds(),                 //秒 
               "q+" : Math.floor((this.getMonth()+3)/3), //季度 
               "S"  : this.getMilliseconds()             //毫秒 
           }; 
           if(/(y+)/.test(fmt)) {
                   fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
           }
            for(var k in o) {
               if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
           return fmt; 
       }    

        
        
        
    </script>



</body>
</html>

<!DOCTYPE html>
<html>

<head>
<#include "/common/common-css.html"/>

<meta charset="utf-8">

	<style>
    .form-group {
        margin-bottom: 0px;
    }
    
    .add-merchant .info label,.add-merchant .info .agree{text-align:left;}
    
    </style>
</head>

<body class="payment-details">
	<!-- page-heading -->
	<div class="row wrapper border-bottom white-bg page-heading">
		
	</div>

 	<div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-8 b-r"><h3 class="m-t-none m-b">1、基本信息</h3>
                                <form id="queryForm2">
                                	<div class="info">
	                                	<label><span>线路:</span>
                            <input id="originsite" name="originSite" type="text" placeholder="出发地">-
                            <input id="destinationsite" name="destinationSite" type="text" placeholder="目的地"><label>
                            <br/>
                            <label><span>车辆:</span>
                            <input id="driverid" name="driverid" type="text" style="display: none;">
                            <input id="drivername" name="driverName" type="text" placeholder="司机姓名" style="width: 10%"> 
                            <input id="drivermobile" name="driverMobile" type="text" placeholder="司机手机号" style="width: 20%"> 
                            
                            <select style="width: 20%" name="VehicleSpecification" id="VehicleSpecification">	
                             <option value="30">4.2米</option>
                            </select> 
                            <input id="Vehicleplatenumber" name="VehiclePlateNumber" type="text" placeholder="输入车牌号" style="width: 15%"> 
                            <input id="Vehicletandemplatenumber" name="VehicleTandemPlateNumber" type="text" placeholder="拖挂车牌号" style="width: 15%">
                            
                            <label>
	                                	
                                	</div>
                                </form>
                            </div>
                            <div class="col-sm-4">
                                
                                 <span>常用线路:</span><span>武汉——北京</span><br/>
                                 <br/>
                                 <span>常用车辆:</span><div style=" width: 80%; height:150px;">
                                 <div id="top">
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;"onclick="getinfo(0)" id="divs0"></div>
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(1)" id="divs1"></div>
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2% ;float: left; display: none;"onclick="getinfo(2)" id="divs2" ></div>
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2% ;float: left; display: none;"onclick="getinfo(3)" id="divs3"></div>
                                 </div>
                                 <div id="index">
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(4)" id="divs4"></div>
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(5)" id="divs5" ></div>
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(6)" id="divs6"></div>
                                 <div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(7)" id="divs7"></div>

                                 </div>
                                 </div>
          </div>
                            </div>
                        </div>


		<div class="ibox-content">
			<div class="row">
				<div class="col-sm-10 b-r">
					<h3 class="m-t-none m-b">2、装车信息</h3>
					<div class="wrapper wrapper-content  animated fadeInRight">
						
						<input type="text" id="Order_number" value="${item_selected}" style="display: none;">
						<div  class="query-criteria" style="background: #fff; margin: 0; padding: 0; padding-top: 0px; padding-bottom: 10px;"> 
								        <form id="queryForm">
								        <div class="form-group" id="data_5">
					                                <div class="input-daterange input-group" id="datepicker">
					                                    <input type="text" class="input-sm form-control" name="start" placeholder="下单时间" value=""/>
					                                    <span class="input-group-addon">至</span>
					                                    <input type="text" class="input-sm form-control" name="end" placeholder="下单时间" value="" />
					                                </div>
					                            </div>
	                                    		<input name="waybillId" id="waybillIdQuery" type="text" placeholder="承运单号" class="form-control" style="width: 150px">
	                                    		<input name="consignorCity" id="consignorCity" type="text" placeholder="始发地" class="form-control" style="width: 80px">
	                                    		<input name="consigneeCity" id="consigneeCity" type="text" placeholder="目的地" class="form-control" style="width: 80px">
	                                    		<input name="carrier" id="carrier" type="text" placeholder="专线公司" class="form-control" style="width: 80px">
	                                    		<input name="cargoName" id="cargoName" type="text" placeholder="货物名称" class="form-control" style="width: 80px">
	                                    		<input name="declaredValueStart" id="declaredValueStart" type="text" placeholder="申明价值" class="form-control" style="width: 80px">
	                                    		<input name="declaredValueEnd" id="declaredValueEnd" type="text" placeholder="申明价值" class="form-control" style="width: 80px">
	                                    		<select name="insure" id="insureQuery" class="form-control">
	                                    			<option value="">-是否投保-</option>
	                                        	 	<option value="1">是</option>
	                                        	 	<option value="2">否</option>
	                                    		</select>
							                <button id="btnQuery" type="button">查询</button>
							            </form>
							        </div>
						
						<!-- 表格 -->
						<div class="row">
							<div class="col-lg-12">
								<div class="ibox ">
									<div class="ibox-content">
										<div class="jqGrid_wrapper">
											<table border="1px" width="100%" id="infotable" cellspacing="0px" style="border-collapse:collapse;margin-left: -20px">
												 <tr style="height: 30px">
					                                <th width="2%"></th>
					                                <th width="10%">下单时间</th>
												 	<th width="14%">订单编号</th>
												 	<th width="12%">线路</th>
												 	<th width="10%">专线公司</th>
												 	<th width="8%">货物名称</th>
												 	<th width="10%">申明价值</th>
										 	       <th width="10%">投保诉求</th> 
												 </tr>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6"></div>
			</div>
		</div>
		<div class="ibox-content">
			<div class="row">
				<div class="col-sm-5 b-r">
					<h3 class="m-t-none m-b">3、结算信息</h3>
					<div class="ibox-content">
                            <form class="form-horizontal" id="feetinfo">
                            <label><span>货车司机:</span>
	                            <select style="width: 100px" name="driverFreightSettleWay">
	                            <option value="" selected='selected' >选择支付方式</option>
		                             <option value="cash">现付</option>
		                             <option value="collect">到付</option>
		                             <option value="receipt" >回付</option>
		                             <option value="monthly">月结</option>
	                            </select>
                            <input id="amount" name="amount" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" >元</label>
                            <br/>
                            <div id="div1" >
                           </div>
                            </form>
					</div>
					
				</div>
				<div class="col-sm-7">
				
				<div class="col-lg-4">
                <div class="widget lazur-bg no-padding">
                    <div class="p-m">
                    <h2 class="font-bold no-margins">
                                                                                                      总收入:
                        </h2>
                      <h1 class="m-xs"><small><span>¥</span><span id="allcount">0</span>.00元</small></h1>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="widget lazur-bg no-padding">
                    <div class="p-m">
                    <h2 class="font-bold no-margins">
                                                                                                     成本支出:
                        </h2>
                        <h1 class="m-xs"><small><span>¥</span><span id="outcount">0.00</span>元</small></h1>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="widget lazur-bg no-padding">
                    <div class="p-m">
                    <h2 class="font-bold no-margins">
                                                                                                      剩余收入:
                        </h2>
                         <h1 class="m-xs"><small><span>¥</span><span id="getcount">0.00</span>元</small></h1>
                    </div>
                </div>
            </div>
				
				
				</div>
			</div>
		</div>
	<div class="box" style="width:90%;">
	<button type="button" class="btn btn-primary btn-lg" style="margin:0 auto;display:block; width: 200px" onclick="loadingBtn()">下一步</button>
</div>
<#include "/common/common-js.html"/>
	<script>
	
	    var indexs;
	    var Compang;
	    var item_selected = new Array();
		$(document).ready(function() {
			
			var Order_number=$("#Order_number").val();
			$.ajax({
				url:"${request.contextPath}/loading/index?Order_number="+Order_number,
				type:"POST",
				dataType: "json",
				success: function (data){
					var settleAmount=data.settleAmount;//总金额
					$("#allcount").text(settleAmount);//总金额赋值
					var e =data.list;//得到运单信息
					var cou=e.length;
					var vehicleList = data.vehicleList;//得到司机信息
					var lines=data.compangnum;
					var insurenum=data.insurenum;
					var declaredValuenums=data.declaredValuenum;
					var declaredValuenum=declaredValuenums+='.00';
					Compang =data.Compang;//公司
					
					//拼接司机信息
					for(var n=0; n<vehicleList.length; n++){
						if( n < 8 ){
							var vehicleId = vehicleList[n].vehicleId;//司机id
							var driverName = vehicleList[n].driverName;//司机姓名
							var driverMobile = vehicleList[n].driverMobile; //手机号
							var vehicleSpecification = vehicleList[n].vehicleSpecification;//类型
							var vehiclePlateNumber = vehicleList[n].vehiclePlateNumber;//车牌号
							var vehicleTandemPlateNumber = vehicleList[n].vehicleTandemPlateNumber;//拖挂车牌号
							
						    $("#divs"+n).show();
							var html="<span id='vehicleId"+n+"' style='display: none;''>"+vehicleId+"</span><span id='vehicleSpecification"+n+"' style='display: none;''>"+vehicleSpecification+"</span><span id='vehiclePlateNumber"+n+"' style='display: none;''>"+vehiclePlateNumber+"</span><span id='vehicleTandemPlateNumber"+n+"' style='display: none;''>"+vehicleTandemPlateNumber+"</span><span style='text-align: center;display:block;' id='driverName"+n+"'>"+driverName+"</span><br/><span id='driverMobile"+n+"'>"+driverMobile+"</span>";
							$("#divs"+n).append(html);
						}
						
					}
					
					//定义数组用来统计有几个专线公司的个数
					var mycars = new Array();
					var htmls="";//表格数据
					var html="";//公司结算方式
					for(var i=0;i<e.length;i++){
						var createTime=formatterDate(e[i].createTime);//创建时间
						var waybillId=e[i].waybillId;//订单编号
						item_selected.push(waybillId);
						var carrier=e[i].carrier;//专线公司
						var carrierId=e[i].carrierId;//承运方专线公司ID
						var consignorCity =e[i].consignorCity; //发货人city
						var consigneeCity =e[i].consigneeCity; //收货人city
						var line=consignorCity+"-"+consigneeCity;
						
						if(i == 0){
							mycars.push(carrier);
							indexs=i;
							html+="<label style='width: 400px' ><span>"+carrier+":</span><select style='width: 100px' name='settleway"+i+"'><option value='' selected='selected' >选择支付方式</option><option value='cash'>现付</option><option value='collect'>到付</option><option value='receipt'  >回付</option> <option value='monthly'>月结</option></select><input name='amount"+i+"' id='amount"+i+"' type='text' oninput='OnInput (event)' onpropertychange='OnPropChanged (event)'>元<input name='carrierid"+i+"'  type='text' value='"+carrierId+"' style='display:none'></label>";
						}else{
						for(var j=0;j<mycars.length;j++){
							if(carrier == mycars[j]){
								
							}else{
								mycars.push(carrier);
								html+="<label style='width: 400px' ><span>"+carrier+":</span><select style='width: 100px' name='settleway"+i+"'><option value='' selected='selected' >选择支付方式</option><option value='cash'>现付</option><option value='collect'>到付</option> <option value='receipt'>回付</option><option value='monthly'>月结</option></select><input name='amount"+i+"' id='amount"+i+"'  type='text' oninput='OnInput (event)' onpropertychange='OnPropChanged (event)'>元<input name='carrierid"+i+"' type='text'value='"+carrierId+"' style='display:none'></label>";
								indexs++;
							}
						  }
						}
						
						var cargoName=e[i].cargoName;//货物名称
						var declaredValues=e[i].declaredValue;//申明价值
						var declaredValue=declaredValues += '.00';//申明价值
						
						var insure=e[i].insure;//是否投保
						if(insure == 1){
							insure="要求投保";
						}else{
							insure="未投保";
						}
						htmls +="<tr style='height: 30px'><td><input type='checkbox' name='box' value='"+waybillId+"' onclick='checkboxOnclick(this)'></td><td>"+createTime+"</td><td>"+waybillId+"</td><td>"+line+"</td><td>"+carrier+"</td><td>"+cargoName+"</td><td>"+declaredValue+"</td><td>"+insure+"</td></tr>";       
					}
					$("#infotable").append(htmls);
					
					var count="<tr style='height: 30px'><td></td><td>已选择:<span id='order'>"+cou+"</span>个订单</td><td></td><td><span id='line'>"+lines+"</span>个线路</td><td><span id='compang'>"+Compang+"</span>个专线</td><td></td><td>总价值:<span id='num'>"+declaredValuenum+"</span>元</td><td><span id='count'>"+insurenum+"</span>个保险诉求</td></tr>";
					$("#infotable").append(count);
					$("#div1").append(html);
					$('input[type|=checkbox]').attr('checked','checked');
					
				 } 
			});
			
			//时间的转换
	        function formatterDate(cellvalue) {
	            var oldTime = (new Date(cellvalue)).getTime();
	            var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
	            return curTime;
	          }
	        
	          Date.prototype.format = function(fmt) { 
	              var o = { 
	                 "M+" : this.getMonth()+1,                 //月份 
	                 "d+" : this.getDate(),                    //日 
	                 "h+" : this.getHours(),                   //小时 
	                 "m+" : this.getMinutes(),                 //分 
	                 "s+" : this.getSeconds(),                 //秒 
	                 "q+" : Math.floor((this.getMonth()+3)/3), //季度 
	                 "S"  : this.getMilliseconds()             //毫秒 
	             }; 
	             if(/(y+)/.test(fmt)) {
	                     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
	             }
	              for(var k in o) {
	                 if(new RegExp("("+ k +")").test(fmt)){
	                      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
	                  }
	              }
	             return fmt; 
	         }    

	  	  	$('#data_5 .input-daterange').datepicker({
	              keyboardNavigation: false,
	              forceParse: false,
	              autoclose: true
	          });
		});
		
		 function OnInput (event) {
                var sum=0;
                for(var i = 0;i<Compang;i++){
                	var amount=$("#amount"+i).val();
                	if(amount!=''){
                    	sum += parseInt(amount);
                	}
                }
                var driver=$("#amount").val();
                if(driver != ''){
                sum += parseInt(driver);
                }
                sum += '.00';
	            $("#outcount").text(sum);//支出成本
	            
	            var get=$("#allcount").text();
	 	         var getmoney= parseFloat(get)-sum;
	 	        getmoney += '.00';
	            
	            $("#getcount").text(getmoney);//剩余金额
	            
	        }
	    // Internet Explorer
	        function OnPropChanged (event) {
	        	var sum=0;
                for(var i = 0;i<Compang;i++){
                	var amount=$("#amount"+i).val();
                	if(amount!=''){
                    	sum += parseInt(amount);
                	}
                }
                var driver=$("#amount").val();
                if(driver != ''){
                sum += parseInt(driver);
                }
                
	            $("#outcount").text(sum);//支出成本
	            
	            var get=$("#allcount").text();
	 	         var getmoney= parseFloat(get)-sum;
	            
	            $("#getcount").text(getmoney);//剩余金额
	        }
		
		
		//点击下一步的事件 保存装车单事件
		 function loadingBtn(){
			var count=$("#getcount").text();
			  if(count<0){
	 	        	 
	 	        	 alert("剩余金额不能为负数");
	 	        	 return;
	 	         }
			
			 var Ordernumbers=$("#Order_number").val();
			//获取到基本信息
			 var information=getParmInfo("#queryForm2");
			 var feetinfo=getParmInfo("#feetinfo");
			 
			 var obj=JSON.parse(feetinfo);
			 var feetArray = new Array();
			 for(var i=0;i<indexs;i++){
				 var key='settleway';
				 var settleways=obj.key;
			 }
			 
			 var parm={
					"information":information,
					"Ordersnumbers":Ordernumbers,
					"feetinfo":feetinfo,
					"indexs":indexs
			 };
			saveinfo(parm);
		};
		                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
		//传参保存方法
		function saveinfo(parm){
			$.ajax({
				url:"${request.contextPath}/loading/addloading",
				type:"POST",
				data: parm,
				dataType: "json",
				success:function(e){
					alert("成功");
				}
			})
		};
		
		function getinfo(i){
			var vehicleId = $("#vehicleId"+i).text();//司机id
			$("#driverid").val(vehicleId);
			var driverName = $("#driverName"+i).text();//司机姓名
			$("#drivername").val(driverName);
			var driverMobile = $("#driverMobile"+i).text();//司机手机号
			$("#drivermobile").val(driverMobile);
			var vehicleSpecification = $("#vehicleSpecification"+i).text();//货车类型
			$("#VehicleSpecification").val(vehicleSpecification);
			var vehiclePlateNumber = $("#vehiclePlateNumber"+i).text();//货车车牌
			$("#Vehicleplatenumber").val(vehiclePlateNumber);
			var vehicleTandemPlateNumber = $("#vehicleTandemPlateNumber"+i).text();//甩挂
			$("#Vehicletandemplatenumber").val(vehicleTandemPlateNumber);
			
		}
		
		//点击查询按钮事件
        $("#btnQuery").on("click", function () {
        	 var boxes = document.getElementsByName("box");
        	var information=getParmInfo("#queryForm");
        	 var Ordernumberq=$("#Order_number").val();
        	var parm={
        			"information":information,
        			"Ordernumbers":Ordernumberq
        	};
        	$.ajax({
				url:"${request.contextPath}/loading/findInfoByquery",
				type:"POST",
				data: parm,
				dataType: "json",
				success:function(e){
					var list=e.lists;
					
					var unms;//运单数量
					
					if(list.length == 0){
						$('input[type|=checkbox]').attr('checked',false);
					}else{
						item_selected.splice(0,item_selected.length);
						for(i=0;i<boxes.length;i++){
		        	        for(j=0;j<list.length;j++){
		        	        	unms = list.length;
		        	            if(boxes[i].value == list[j].waybillId){
		        	                boxes[i].checked = true;
		        	                item_selected.push(list[j].waybillId);
		        	                break
		        	            }else{
		        	            	 boxes[i].checked = false;
		        	            }
		        	        }
		        	    }
					}
					
					var lines=e.compangnum;//线路
					var insurenum=e.insurenum;//是否投保
					var declaredValuenum=e.declaredValuenum;//申明价值
					var Compang=e.Compang;//公司
					
					
					$("#order").text(unms);//订单
					$("#line").text(lines);//线路
					$("#compang").text(Compang);//专线
					$("#num").text(declaredValuenum);//总价值:
					$("#count").text(insurenum);//保险
				}
			})
        	
             });
		
		//将数组转化为json
		function getParmInfo(formId){
	          var parm = getGridParam(formId);
	          var parmInfo =  JSON.stringify(parm);
	          return parmInfo;
	        }
	        
		function getGridParam(id) {
			//定义参数数据集合
			var pv = {};
			//获取表单里面的所有数据进行组装条件查询
			$.each($(id).serializeArray(), function(index, obj) {
				var key = $.trim(obj.name);
				var val = $.trim(obj.value);
				//控件数值为字符串空情况不考虑在内
				pv[key] = val
			});
			return pv;
		}
		
		//手动勾选事件
		function checkboxOnclick(checkbox){
			if (checkbox.checked == true){
				item_selected.push(checkbox.defaultValue);
				
			}else{
				
				item_selected=removeItem(item_selected,checkbox.defaultValue)
			}
			
			
			if(item_selected.length == 0){
				
				$("#order").text("0");//订单
				$("#line").text("0");//线路
				$("#compang").text("0");//专线
				$("#num").text("0");//总价值:
				$("#count").text("0");//保险
				
			}else{
			
			$.ajax({
				url:"${request.contextPath}/loading/index?Order_number="+item_selected,
				type:"POST",
				dataType: "json",
				success: function (data){
					var unms;//运单数量
					var list=data.list;
					for(var i = 0 ;i<list.length;i++){
						unms = list.length;
					}
					var lines=data.compangnum;//线路
					var insurenum=data.insurenum;//是否投保
					var declaredValuenum=data.declaredValuenum;//申明价值
					var Compang=data.Compang;//公司
					
					//重新赋值给文本框
					$("#order").text(unms);//订单
					$("#line").text(lines);//线路
					$("#compang").text(Compang);//专线
					$("#num").text(declaredValuenum);//总价值:
					$("#count").text(insurenum);//保险
				}
				});
			}
			
			}
		 
		
		//移除数组中删除的元素值在用一个新的值进行接收
	  	function removeItem(arr,item){
		    let newArr = [];
		    for(let value of arr){
		        if(value !== item){
		            newArr.push(value)
		        }
		    }
		    return newArr;
		}
		

	
		
	</script>


</body>

</html>