2. 程式人生 > >bootstrap點選表頭實現排序功能

bootstrap點選表頭實現排序功能

阿新 • • 發佈：2019-01-13

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>



相關推薦

bootstrap點選表頭實現排序功能

JSP頁面：關鍵地方已經用綠色標識 <%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%> <%@ include file="/WEB

wpf中ListView控制元件點選列頭排序功能實現（超簡潔實用）

 .xaml檔案中的主要程式碼 <ListView Name="lvMeasureData" GridViewColumnHeader.Click="Sort_Click" SelectionChanged="lvMeasureData_SelectionChanged"

Qt QTableWidget點選表頭設定排序

核心程式碼如下： 1 2 3 4 5 6 QHeaderView *headerGoods = _nodeTableWidget->horizontalHeader(); //SortInd

點選滑鼠實現複製功能，相容主流瀏覽器

1.有一個需求，點選滑鼠左鍵，複製連結，可以將該連結貼上，實現一個簡單的複製貼上功能 2.程式碼實現 （1）HTML程式碼 <!DOCTYPE html> <html> <head> <title></title> &

頁面上點選按鈕實現複製功能

引入clipboard.js; htm程式碼: <p class="link-div-p1">優惠券連結:<span id="link-span">http://</span></p> <!--<span sty

三個屬性讓DBGridEH可以點選表頭自動排序

只要設定下面三個屬性： ColumDefValues->Title->TitleButton設為TRUE  sortlocal   設為TRUEOptionsEH->dghautosortmarking設為TRUE   最後，一定要記得在pas檔案的uses

EasyUI Datagrid 分頁的情況下實現點選表頭的小三角圖示對資料庫中所有資料重新排序

說明一下： 當點選 datagrid 表頭某一列的小三角圖示時，easyui 本身是有排序的，但是在當我們對 datagrid 進行了分頁的情況下，點選排序只是對當前頁的資料進行排序，而需求需要我對資料庫裡面的所有資料進行排序，這樣的話只能從後臺先排好序再返回了。 看了一下文件，發

點選表頭排序效果的實現

需求：       在報表的實際應用中有很多客戶希望可以通過點選表頭切換該列資料的排序。 實現方式：      超連結結合引數以及單元格表示式來實現，具體舉例如下      原表樣如下 實現原理：通過點選第一行任意格的值，通過 A2 單元格表示式控制排序 1. 首先

簡單實現點選圖片放大的功能

背景：想在app中加上點選縮圖放大的效果，但是不想匯入大量的JS ，也無需哪些複雜的外掛，於是自己手寫了一個很簡單的實現，在這裡記下來。 程式碼很簡單，還有很多優化空間，時間有限，就沒有優化了 1 . 先準備大圖的位置 大圖是fixed於整個介面，只修改其中的s

點選表頭切換升降序排序方式

需求：       在報表的實際應用中有很多客戶希望可以通過點選表頭切換該列資料的排序。 實現方式：      超連結結合引數以及單元格表示式來實現，具體舉例如下      原表樣如下 實現原理：通過點選第一行任意格的值，通過 A2 單元格表示式控制排序 1. 首先

bootstrap點選刪除按鈕彈出確認框實現

<%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8"

微信小程式 點選切換樣式的功能實現

普通的web開發可以通過JavaScript獲取HTML的Dom結構，但是小程式不可以，小程式實現此功能的方式：資料繫結+data- 去更改標籤類名。step 1 給選定的標誌 {{}} & data-num此處只綁定了一個類名，也可以繫結N個類名。class='class1 class2 {{num

javascript點選滑鼠實現資料複製功能

方法1： /** * 複製方法 * @param data 要複製的資料 * @private */ function __copy(data) {

點選tr實現選擇checkbox功能，點選checkobx的時候阻止冒泡事件

給tr新增點選事件，使用find方法查詢tr下的所有層級的元素，children只查詢下一層級的元素，所以使用find。 find的返回值為jquery物件，在這個專案中不知道為什麼使用jquery給

django下使用ajax實現點選與翻頁功能

ajax是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁如果需要更新內容，就必須過載整個頁面。下面就介紹一下在django框架中怎樣使用ajax

QT中Qtableview視圖表格中點選表頭進行排序

因為要顯示的資料有多列，很自然的會想到要能夠對顯示的資料進行排序。如果直接操作model裡的資料，不太方便，因為最好是能由使用者自己選擇按哪一列進行排序。如果通過訊號槽機制，也不是很方便。然後找到QTableView下有一個setSortingEnabled()的函式。在將該函式設定為True後，在

android:多次點選效果實現

public class MainActivity extends AppCompatActivity{ private final static int COUNTS = 5;//點選次數 private final static long VALIDTIME = 1300;/

小程式學習--點選按鈕實現分享(元件複用)

首先,第一步,建立一個按鈕的元件,方便複用,當點選按鈕時候,會跳出是否授權的對話方塊: 元件的wxml程式碼: <button  bind:getuserinfo="onGetUserInfo" open-type="{{openType}}" plain="{{true}}

個人筆記002--vue點選按鈕實現狀態的切換

昨天專案改版，寫了一個功能——點選按鈕在啟用/未啟用兩個狀態之間切換。下面直接上程式碼 <template> <div class="hello"> <div class="payShow" v-for="n,index in details" :key

bootstrap 多選按鈕實現方式，js,jQuery刪除陣列中指定元素

bootstrap有許多，非常漂亮的設計，不用自己苦惱於css 的使用。 bootstrap使用，實現多選方法： 1、使用bootstrap的表格標籤，表格內容為PHP返回前端資料， <table class="table table-hover table-bordered"