bootstrap点击表头实现排序功能

其他 2019-01-13 21:32:04 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Hero_QHZ/article/details/76186734

JSP页面：关键地方已经用绿色标识

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/admin/includes/header.jsp"%>
<head>
<link rel="stylesheet" href="${base}/resources/admin/LingUI/css/ui.jqgrid.css" />
<style type="text/css">
select{width:90px;}
input{width:100px;}
.lableClass{color:#2a6496;font-weight: bold; font-size: 14px; margin-top: 20px;}
.btnClass{width:80px; height:30px; border: 1px solid #ccc; background-color: #428bca; margin-left:70px;}
</style>
</head>


<div class="row">
<div class="col-xs-12">
<div id="search">
<label class="lableClass"><b>计划号：</b></label>
<input type="text" id="planNo" name="planNo" value="">
<label class="lableClass"><b>发货人：</b></label>
<input type="text" id="shipperName" name="shipperName" value="">
<label class="lableClass"><b>车&nbsp;&nbsp;&nbsp;队：</b></label>
<input type="text" id="phzName" name="phzName" value="">
<label class="lableClass"><b>司机确认：</b></label>
<select id="dispatchAudit" name="dispatchAudit">
<option value=''>全部</option>
<option value='0'>未确认</option>
<option value='1'>已确认</option>
</select>
&nbsp;&nbsp;
<label class="lableClass"><b>停车场：</b></label>
<input type="text" id="parkName" name="parkName" value="">
<label class="lableClass"><b>作业库区：</b></label>
<select name="depotId" id="depotId">
<option value="">全部</option>
<c:forEach items="${oilDepot}" var = "depot" varStatus="status">
<option value="${depot.id}">${depot.depotName}</option>
</c:forEach>
</select>
<br/>
<label class="lableClass"><b>作废：</b></label>
&nbsp;&nbsp;
<select id="ifDel" name="ifDel">
<option value=''>全部</option>
<option value='0'>未作废</option>
<option value='1'>作废</option>
</select>
&nbsp;&nbsp;
<label class="lableClass"><b>车牌号：</b></label>
<input type="text" id="carNo" name="carNo" value="">
<label class="lableClass"><b>收货人：</b></label>
<input type="text" id="getowner" name="getowner" value="">
<label class="lableClass" ><b>放&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车：</b></label>
<select id="ifImport" name="ifImport">
<option value=''>全部</option>
<option value='0'>未放车</option>
<option value='1'>放车</option>
</select>
<label class="lableClass" ><b>接单状态：</b></label>
<select id="carReceive" name="carReceive">
<option value=''>全部</option>
<option value='0'>未接单</option>
<option value='1'>接单中</option>
<option value='2'>已接单</option>
</select>&nbsp;&nbsp;
<label class="lableClass"><b>场区状态：</b></label>
<select id="park" name="park">
<option value=''>全部</option>
<option value='0'>未进场</option>
<option value='1'>已进场</option>
<option value='2'>已出场</option>
</select>
<br>
<label class="lableClass" ><b>结束：</b></label>
&nbsp;&nbsp;
<select id="ifBillEnd" name="ifBillEnd">
<option value=''>全部</option>
<option value='0'>未结束</option>
<option value='1'>已结束</option>
</select>
<label class="lableClass"><b>库区状态：</b></label>
<select id="depot" name="depot">
<option value=''>全部</option>
<option value='0'>未进库</option>
<option value='1'>已进库</option>
<option value='2'>已出库</option>
</select>
<button type="button" class="btnClass"  onclick="search()"><span style="color:#FFF;">查询</span></button>
</div>
<div class="b_grid_line  col-lg-12"></div> <!-- 分隔线 -->
<table id="oil_billpc_table" class="grid-table"></table> <%--jqgrid数据表格 --%>
<div id="oil_billpc_pager"></div> <%--jqgrid表格 页脚 --%>
</div>
</div>
<script type="text/javascript">
var scripts = [null,
    "${base}/resources/admin/LingUI/js/jqGrid/jquery.jqGrid.js",
    "${base}/resources/admin/LingUI/js/jqGrid/i18n/grid.locale-cn.js",
    "${base}/resources/admin/LingUI/js/jsutil/js/jquery.filterSearch.js",   //筛选搜索
    null];
var _grid_id = "#oil_billpc_table"; //表格 选择器
var _pager_id = "#oil_billpc_pager"; //表格页脚 选择器
ace.load_ajax_scripts(scripts, function() {
    jQuery(_grid_id).jqGrid({
        mtype : "POST",
        url: "${base}/admin/oil/billPc/getList.do",
        colNames:['id','out_park_time','out_depot_time','车牌号','指派时间','放车排序','确认','接单','计划号','发货人','收货人','车队','停车场','放车','停车场状态','停车场排序','库区','库区状态','状态','结束'],
        colModel:[
            {name:'id',index:'id', width:0,  editable: true,  hidden:true},
            {name:'out_park_time',index:'out_park_time', width:0,  editable: true,  hidden:true},
            {name:'out_depot_time',index:'out_depot_time', width:0,  editable: true,  hidden:true},
            {name:'car_no',index:'car_no', width:100, align:'center', editable: true,formatter:
            function(cellvalue, options, rowObject) {
                if(cellvalue != null && cellvalue != ''){
                return "<a style='color:blue;text-decoration:underline;' onclick='toOilList("+rowObject.id+")'>"+cellvalue+"</a>";
                }else{
                return "<a style='color:blue;text-decoration:underline;' onclick='toOilList("+rowObject.id+")'>-</a>";
                }
             }
        },
            {name:'input_time',index:'input_time', width:0, align:'center', editable: true,formatter:
            function(cellvalue, options, rowObject) {
               if(cellvalue != null && cellvalue != ''){
                /* return lui.timestampFormat(cellvalue,"YYYY-MM-DD HH:mm");; */
                return "<a style='color:blue;text-decoration:underline;' onclick='toCarList("+rowObject.id+")'>"+lui.timestampFormat(cellvalue,"YYYY-MM-DD HH:mm")+"</a>";
               }else{
                return "<a style='color:blue;text-decoration:underline;' onclick='toCarList("+rowObject.id+")'>-</a>";
               }
            }
            },
            {name:'fcorder',index:'fcorder', width:100, align:'center', editable: true},
            {name:'dispatch_audit',index:'dispatch_audit', width:80, align:'center', editable: true, formatter:
                function(cellvalue,option,rowObject){
               if(cellvalue == "0"){
                   return "<span class='label label-error'>"+'未确认'+"</span>";
               }else if(cellvalue == "1"){
                return "<span class='label label-success'>"+'已确认'+"</span>";
               }else{
                return "-";
               }
           }
            },
            {name:'car_receive',index:'car_receive', width:80, align:'center', editable: true, formatter:
                function(cellvalue,option,rowObject){
               if(cellvalue == "0"){
                   return "<span class='label label-error'>"+'未接单'+"</span>";
               }else if(cellvalue == "1"){
                return "<span class='label label-info'>"+'接单中'+"</span>";
               }else if(cellvalue == "2"){
                return "<span class='label label-success'>"+'已接单'+"</span>";
               }else{
                return "-";
               }
           }
            },
            {name:'plan_no',index:'plan_no', width:100, align:'center', editable: true},
            {name:'shipper_name',index:'shipper_name', width:200, align:'center', editable: true},
            {name:'getowner',index:'getowner', width:200, align:'center', editable: true},
            {name:'phz_name',index:'phz_name', width:0, align:'center', editable: true},
            {name:'park_name',index:'park_name', width:90, align:'center', editable: true},
            {name:'if_import',index:'if_import', width:80, align:'center', editable: true, formatter:
                function(cellvalue,option,rowObject){
               if(cellvalue == "0"){
                   return "<span class='label label-error'>"+'未放'+"</span>";
               }else if(cellvalue == "1"){
                return "<span class='label label-success'>"+'已放'+"</span>";
               }else{
                return "-";
               }
           }
            },
            {name:'in_park_time',index:'in_park_time', width:80, align:'center', editable: true,formatter:
            function(cellvalue, options, rowObject) {
               if(cellvalue != null && rowObject.out_park_time==null){
                return '已进场';
               }else if(cellvalue == null && rowObject.out_park_time==null){
                return '未进场';
               }else if(cellvalue != null && rowObject.out_park_time!=null){
                return '已出场';
               }else{
                return '-';
               }
            }
            },
            {name:'sort_no',index:'sort_no', width:80, align:'center', editable: true},
            {name:'depot_name',index:'depot_name', width:80, align:'center', editable: true},
            {name:'in_depot_time',index:'in_depot_time', width:80,align:'center',  editable: true,formatter:
            function(cellvalue, options, rowObject) {
               if(cellvalue != null && rowObject.out_depot_time==null ){
                return '已进库';
               }else if(cellvalue == null  && rowObject.out_depot_time==null ){
                return '未进库';
               }else if(cellvalue != null  && rowObject.out_depot_time!=null ){
                return '已出库';
               }
            }
            },
            {name:'if_del',index:'if_del', width:80, align:'center', editable: true, formatter:
                function(cellvalue,option,rowObject){
               if(cellvalue == "0"){
                   return "正常";
               }else if (cellvalue == "1"){
                   return "<font color='red'>作废</font>";
               }else{
                return "-";
               }
           }
            },
            {name:'if_bill_end',index:'if_bill_end', width:80, align:'center', editable: true, formatter:
                function(cellvalue,option,rowObject){
               if(cellvalue == "0"){
                   return "<span class='label label-success'>"+'未结束'+"</span>";
               }else if(cellvalue == "1"){
                return "<span class='label label-info'>"+'已结束'+"</span>";
               }else{
                return "-";
               }
           }
            }
        ],
        
        pager : _pager_id, //分页信息 放置的位置
        page : lui.pageNum(_grid_id),
        shrinkToFit:false,    
        gridComplete:function(){
$(".ui-jqgrid-bdiv").css({"overflow-x":"scroll"});//设置水平滚动 和 shrinkToFit：false联合使用
},
// 表头排序
        onSortCol : function(index,iCol,sortorder){
        var data = {
        indexs:index,
        sortorders:sortorder
        }
        callback(data);
        }
    });
    //自定义工具栏 =============BEGIN======================//
    jQuery(_grid_id)
        .jqGrid('navGrid',_pager_id)
    //自定义工具栏 =============END======================//
});



$().ready(function(){
$("select").change(function(){
callback();
});
});


//搜索回调函数
function callback(data){
var $carNo = $("#carNo").val();
var $planNo = $("#planNo").val();
var $shipperName = $("#shipperName").val();
var $phzName = $("#phzName").val();
var $dispatchAudit = $("#dispatchAudit").val();
var $parkName = $("#parkName").val();
var $depotId = $("#depotId").val();
var $ifDel = $("#ifDel").val();
var $getowner = $("#getowner").val();
var $ifImport = $("#ifImport").val();
var $carReceive = $("#carReceive").val();
var $park = $("#park").val();
var $depot = $("#depot").val();
var $ifBillEnd = $("#ifBillEnd").val();
if (data==null||data=='undefined'){
var data={};
}
data.carNo=$carNo;
data.planNo=$planNo;
data.shipperName=$shipperName;
data.phzName=$phzName;
data.dispatchAudit=$dispatchAudit;
data.parkName=$parkName;
data.depotId=$depotId;
data.ifDel=$ifDel;
data.getowner=$getowner;
data.ifImport=$ifImport;
data.carReceive=$carReceive;
data.park=$park;
data.depot=$depot;
data.ifBillEnd=$ifBillEnd;
   jQuery("#oil_billpc_table").jqGrid('setGridParam', {
       url : "${base}/admin/oil/billPc/getList.do",
       mtype : "POST",
       postData:data //传递的数据
   }).trigger("reloadGrid");
}

function search(){
callback();
}

/* 接单详情 */
function toCarList(id){
layer.open({
type: 2,
       shade: 0.6,
    title: '提单信息',
    content: '${base}/admin/oil/billPc/look.do?id='+id,
    btn: false,
    area: ['70%', '90%'],
    yes: function(index, layero){
    var iframeWin = $(layero).find("iframe")[0].contentWindow;
    var retObj = iframeWin.formValid();
    if(retObj.text){
    lui.info(retObj.text);
    if(retObj.state == "success"){
    layer.close(index);
    jQuery(_grid_id).trigger("reloadGrid");
    }
    }
    }
    });
//toLocation("${base}/admin/oil/billPc/look.do?id="+id);
}

/* 油品市提单证查询*/
function toOilList(id){
layer.open({
type: 2,
       shade: 0.6,
    title: '油品市提单证查询',
    content: '${base}/admin/oil/billPc/toOilList.do?id='+id,
    btn: false,
    maxmin : true,
    area: ['80%', '90%'],
    yes: function(index, layero){
    var iframeWin = $(layero).find("iframe")[0].contentWindow;
    var retObj = iframeWin.formValid();
    if(retObj.text){
    lui.info(retObj.text);
    if(retObj.state == "success"){
    layer.close(index);
    jQuery(_grid_id).trigger("reloadGrid");
    }
    }
    }
    });
}

//获取所有选中的row 的数据数组
function getRowDataArr(){
var rowDataArr = $("#oil_billpc_table").jqGrid("getRowDataArr");//获取所有选中的row 的数据数组
return rowDataArr;
}
</script>



后台展示数据方法：

controller：

@RequestMapping(value = "/getList", method = RequestMethod.POST)
	public @ResponseBody String getList(Page page,DbcOilBill dbcOilBill,
			   @RequestParam(value = "shipperName",required = false)String shipperName,
			   @RequestParam(value = "phzName",required = false)String phzName,
			   @RequestParam(value = "dispatchAudit",required = false)String dispatchAudit,
			   @RequestParam(value = "depotId",required = false)String depotId,
			   @RequestParam(value = "carNo",required = false)String carNo,
			   @RequestParam(value = "getowner",required = false)String getowner,
			   @RequestParam(value = "carReceive",required = false)String carReceive,
			   @RequestParam(value = "park",required = false)String park,
			   @RequestParam(value = "depot",required = false)String depot,
			   @RequestParam(value = "indexs",required = false)String indexs,
			   @RequestParam(value = "sortorders",required = false)String sortorders){
	    
	    List<Integer> depotList = new ArrayList<Integer>();
        //如果库区为空，则选择为全部，取该用户所属部门下拥有的库区权限
        if(StringUtils.isEmpty(depotId)){
            Map<String, Object> map = getBackUserDepot();
            depotList = (List<Integer>) map.get("idList");
        }else{
            depotList.add(Integer.valueOf(depotId));
        }
        
		return JSON.toJSONString(backBillPcService.findall(page,dbcOilBill,shipperName,phzName,dispatchAudit,
		        depotList,carNo,getowner,carReceive,park,depot,indexs,sortorders));
	}

service： 

@Override
	public Map<String, Object> findall(Page page, DbcOilBill dbcOilBill,String shipperName, String phzName, 
		String dispatchAudit, List<Integer> depotList, String carNo, String getowner, 
		String carReceive, String park, String depot,String indexs,String sortorders) {
		 Map<String,Object> map = new HashMap<String,Object>();
	        PageHelper.startPage(page.getPage(), page.getRows());
	        List<Map<String, Object>> list = dbcOilBillMapper.findAll(dbcOilBill,shipperName,phzName,dispatchAudit,
	                depotList,carNo,getowner,carReceive,park,depot,indexs,sortorders);
	        PageInfo pageInfo = new PageInfo(list);
	        map.put("total", pageInfo.getPages());
	        map.put("records", pageInfo.getSize());
	        map.put("rows", list);
			return map;
	}

mapper： 

List<Map<String,Object>> findAll(@Param("dbcOilBill")DbcOilBill dbcOilBill,
			@Param("shipperName")String shipperName, 
			@Param("phzName")String phzName, 
			@Param("dispatchAudit")String dispatchAudit, 
			@Param("depotList")List<Integer> depotList, 
			@Param("carNo")String carNo, 
			@Param("getowner")String getowner, 
			@Param("carReceive")String carReceive, 
			@Param("park")String park, 
			@Param("depot")String depot, 
			@Param("indexs")String indexs, 
			@Param("sortorders")String sortorders);


mapper.xml:

<select id="findAll" resultType="java.util.HashMap">
  		select a.id,a.plan_no,
  		a.park_name,
  		a.in_park_time,
  		a.out_park_time,
  		a.input_time,
  				a.in_depot_time,
  				a.out_depot_time,
  				a.if_bill_end,
  				a.if_import,
  				a.if_del,
		  		b.shipper_name,
		  		b.getowner,
		  		e.depot_name,
		  		b.dispatch_audit,
		  		c.car_no,
		  		c.car_receive,
		  		c.if_lock,
		  		d.park_confirm_time,
		  		d.phz_name,
		  		b.depot_code,
		  		a.split_id,
		  		a.fcorder,
		  		b.sort_no
  		from dbc_oil_bill a
  		left join dbc_oil_plan b
  		on a.plan_id = b.id
  		left join dbc_car c
  		on a.head_car_id = c.id
  		left join dbc_oil_plan_split d
  		on a.split_id = d.id
  		left join dbc_oil_depot e 
  		on b.depot_code=e.code
  		<where>
  		e.id in 
		<foreach collection="depotList" item="depotId" index="index" open="(" separator="," close=")">
	  		${depotId}
	  	</foreach>
  		<if test="dbcOilBill.planNo != null">
  			and a.plan_no like concat ('%',#{dbcOilBill.planNo},'%')
  		</if>
  		<if test="dbcOilBill.parkName != null">
  			and a.park_name like concat ('%',#{dbcOilBill.parkName},'%')
  		</if>
  		<if test="dbcOilBill.ifDel != null">
  			and a.if_del = #{dbcOilBill.ifDel}
  		</if>
  		<if test="dbcOilBill.ifImport != null">
  			and a.if_import = #{dbcOilBill.ifImport}
  		</if>
  		<if test="dbcOilBill.ifBillEnd != null">
  			and a.if_bill_end = #{dbcOilBill.ifBillEnd}
  		</if>
  		<if test="park != null and park==0">
  			and a.in_park_time is null and a.out_park_time is null
  		</if>
  		<if test="park != null and park==1">
  			and a.in_park_time is not null and a.out_park_time is null
  		</if>
  		<if test="park != null and park==2">
  			and a.in_park_time is not null and a.out_park_time is not null
  		</if>
  		<if test="depot != null and depot==0">
  			and a.in_depot_time is null and a.out_depot_time is null
  		</if>
  		<if test="depot != null and depot==1">
  			and a.in_depot_time is not null and a.out_depot_time is null
  		</if>
  		<if test="depot != null and depot==2">
  			and a.out_depot_time is not null
  		</if>
  		<if test="shipperName != null">
  			and b.shipper_name like concat ('%',#{shipperName},'%')
  		</if>
  		<if test="phzName != null">
  			and d.phz_name like concat ('%',#{phzName},'%')
  		</if>
  		<if test="dispatchAudit != null">
  			and b.dispatch_audit =#{dispatchAudit}
  		</if>
  		<if test="carNo != null">
  			and c.car_no like concat ('%',#{carNo},'%')
  		</if>
  		<if test="getowner != null">
  			and b.getowner like concat ('%',#{getowner},'%')
  		</if>
  		<if test="carReceive != null">
  			and c.car_receive =#{carReceive}
  		</if>
  	</where>
		order by 
		<if test="indexs != null and indexs !=''">
  				${indexs} ${sortorders},
  		</if> 
  		a.plan_no desc , a.fcorder asc
  	</select>



猜你喜欢

转载自blog.csdn.net/Hero_QHZ/article/details/76186734
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022