2019年6月2日
数日前、これはうまくいかないようだと言う人もいましたが、当時はプロジェクトから直接切り離されていたので、バックグラウンドなしでは実行できないようです。それを忘れて、それをリフレッシュしてください。コードはそれをデモに変えました。バックグラウンドページングがないため、v-modelは配列と同等であることに注意してください。配列を格納するのに役立ちます。この配列を使用すると、毎回自動的に選択されます。次のコードには1つあります。これ以上のオプションを示すことはできません。怠惰すぎて作れません！完全な選択と逆の選択を直接取得するだけです。以前のコードで遊んでみたい場合は、考えてみてください。これは非常にトレーニングです。あなたがそれを理解すれば、あなたは他の人のコードを見るのを恐れず、将来それを理解しないでしょう。
全選択と反選挙の実施原則について話しましょう。
まず第一に、あなたはいくつかのデータを持っています、私たちは準備します
チェックボックス
リスト：[ {songId： '1'、songName： 'name1'、songSinger： '123'}、
{songId： '2'、songName： 'name2'、songSinger： '234'}、
{songId： '3'、 songName： 'name3'、songSinger： '345'}
]
データ、
次に、それをページに表示させます。
<li v-for = "（list、index） incheckboxList" >
<div>
<label>
<input type = "checkbox"：value = "list.songId"
class = "input_agreement_protocol" v-model = 'checkList'>
<span class = "lists"> {
{list.songName}} </ span>
</ label>
<span class = "layui-col-md"> {
{list.songSinger}} </ span>
</ div>
</ li> </ li>
forループを使用してインスタンス値をトラバースし、それらをページに表示します。
次に、[すべて選択]ボタンを用意する必要があるため、ページに
<div class = "checkAll">
<label>
<input class = "input_agreement_protocol" type = "checkbox" class = "checkedAll"
v-model = 'checked' v-on：click = 'checkedAll' />
</ label>
<label>全選択</ label>
</ div>
ページにはほとんどすべてが含まれているので、すべての選択と逆選択を制御するjsコードがまだ不足しています。
vue.jsの通信では、
チェック済み：false、//すべて選択
後でコードコメントを見てください。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app1">
<div class="checkAll">
<label>
<input class="input_agreement_protocol" type="checkbox" class="checkedAll"
v-model='checked' v-on:click='checkedAll'/>
</label>
<label>全选</label>
</div>
<ul >
<li>
<span>歌曲</span>
<span>操作</span>
<span>歌手</span>
</li>
<li v-for="(list,index) in checkboxList">
<div>
<label>
<input type="checkbox" :value="list.songId"
class="input_agreement_protocol" v-model='checkList'>
<span class="lists">{
{list.songName}}</span>
</label>
<span class="layui-col-md">{
{list.songSinger}}</span>
</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
/*
* Created with Sublime Text 3.
* User: 李松林
* Date: 2018-12-24
* Time: 16:27:55
*/
var app=new Vue({
el:'#app1',
data:{
datas:[],
checkboxList:[
{songId:'1',songName:'name1',songSinger:'123'},
{songId:'2',songName:'name2',songSinger:'234'},
{songId:'3',songName:'name3',songSinger:'345'}
],//后台请求的数据
checked: false, //全选框
checkList: [],//临时存放索引的数组
isShow:false,
},
methods:{
checkedAll: function(){
//全选和反选
var _this = this;
// console.log(_this.checked+"---"+_this.checkList+"----"+_this.checkboxList)
this.$nextTick(function() {
console.log(_this.checked);
//判断是否全选、反选
if(_this.checked){
//遍历出后台数据，得到对应值和一个索引
_this.checkList = _this.checkboxList.map(function(json,index){
console.log(json+","+index)
return json.songId;
})
}else {
//如果为反选直接将选中的list清空
_this.checkList = []
}
});
}
},
watch: { //深度 watcher（时刻判断是否处于所有选择框全选，不是就全选框不选择）
'checkList': {
//当新选中的选择框的总个数等于后台全部数据时，全选框选中，否则不选
handler: function(val, oldVal) {
if (val.length === this.checkboxList.length) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
}
});
- - - - - - - - - - - - - - - - - - - - - - - - -セグメンテーションライン - - - - - - - - - - - - - - - - - - - - - - - - - ----------------------------------------------
2018年12月30日
今日のブログはデモを書くつもりはなく、プロジェクトから直接分離されており、原理と実装方法について大まかに説明しています。もちろん、対応するキーコードも提供します。
まず、jqueryプラグインを提供してくれたある作者に感謝します。そこからは思い出せません。ごめんなさい！書くコードを減らしましょう。もちろん、jqueryを使用することはdomを操作することを意味し、vueは明らかにそれを排除しました、そしてそれでも私はjqueryを使用する必要があります、許してください、私はvueに完全に慣れていません、私は1週間未満しかそれにさらされていません、そして多くの原則と使用法は完全にアイデアから外れています。
したがって、vue.jsが苦手な人のために、vueの学習で発生する問題とそれに対応する理解する知識についても説明します。
兄さん、欠点を指摘してください！
-------------------------------------------------- - - - - - - - - - - - - - - - 分 - - - - - - - - - - ------割線-------------------------------------
私が実装したい関数について話させてください。それはあなたの助けになるかもしれません。
上記の特定の機能は、カテゴリをクリックして対応するデータをクエリすることです。これは、以下のul liでレンダリングされ、vueを使用してレンダリングされます。jsltと同様に、ajaxがトラバースするforループによって取得されたjsonデータをレンダリングするのは簡単です。 ; jspは、javaGettedのget / setメソッドを使用し、javaリフレクションを介してxmlに変換して、HTMLに使用できるタグペアになりますが、本質は依然としてjavaコードであるため、フロントエンドとバックエンドを分離するために、フロントエンドフレームワークを使用して実現すると、jsonは間違いなく最高のデータ形式であり、レンダリングに便利です。
[すべて選択]チェックボックスには、すべてを反転して選択する機能があります。この機能のコードは、Baiduの大物からのものですが、大物は大物です。上記のコードの説明はありません。Xiaobaiにそのコピーを見せてください。貼り付けは機能しますが、機能しません。コメントがなくても、このように実装されていることを理解するのは面倒です。
jqueryの習慣によると、もちろん私は.vueではなく.jsファイルでコードを記述します。これは非常に面倒です。mian.jsはこれまで理解されておらず、コンポーネントの使用法もまだ理解されていないようですが、jqueryの習慣に従ってコードを実装することは問題ありません。
少なくとも、vueを書くためのjavaとJavaScriptのアイデアに従って、最初にvueオブジェクトを作成し、メソッドをvueオブジェクトにカプセル化し、対応するプロパティを宣言します。
もちろん、これはすべて、ボックスを含むdivで使用する必要があります。最初に、IDを宣言します。
HTML
<div id = "app-7">
<p> { {回答}} </ p>
</ div>
JS
var app7 = new Vue（{
el： '＃app-7'、//要素要素、対応するdiv id
データ：{
回答： '' //レンダリングにも使用されるjson形式のようなプロパティを宣言します
}
}）
上記のvueチュートリアルはすべて、グランドスタンド用ではなく、原則を合理化したいだけです。
もちろん、ページングと記憶のオプションが最も重要です。これには、ほぼ3〜4日かかりました。正直なところ、Vueは非常に使いにくい場合があり、大きな問題に直面しました。ここで簡単に話しましょう。何か解決策があれば聞きたいです。
これで、vue + axiosを介してバックグラウンドからページをレンダリングするデータを取得し、コールバック関数がデータをレンダリングします。ページが表示されると、すぐにバックグラウンドレンダリングデータを要求します。この時点では、ページ付けはjqueryプラグインでは、訪問するたびに、対応するページネーションが自動的に生成されます。上記の分類ボタンがあるため、クエリをクリックするとデータが再度要求され、新しいページネーションHTMLが取得されます。前のHTMLページ付けと同時に、これは1行の下に追加するのと同じです。
現時点では、これは非常に悪いと感じました。コールバック関数のページングプラグインコードを分離し、メソッドのメソッドに記述しました。同時に、ページはすぐにレンダリングされる必要があります。入ってくるが、ページ数と合計は前のメソッドからのものでなければならない対応するデータを取得するためのコールバック関数は、マウントされた状態で数秒のスリープ後にデータを正常にロードできますが、これは要件を満たしていません。
これら2つのプログラムを同時にロードする場合、これは未定義であり、前のメソッドのコールバック関数の値を取得できません。前のメソッドのコールバック関数が次のようになった後、次のメソッドを呼び出す方法を知りたいです。これは$ nextTick Thisメソッドを試しましたが、結局は役に立たないので、thenコールバック関数にjqueryメソッドを記述し、domを操作して前の要素を削除します。
まあ、これ以上ナンセンスはありません。以下は理解しなければならない知識です。
vueページングと記憶オプションを実現したい場合は、v-modelの使用法を理解する必要があります。これは非常に便利です。オプションを記憶することができ、データベースから照会された値に対して特定の一意のインデックスを設定するだけで済みます。実際、このステップですでに関数を完了できることを理解できます。自分で作成したJavaScriptと比較すると、チェックを外して選択し、配列に入れてから、配列のデータに応じてチェックボックスをエコーするのが非常に便利です。
しかし、この原則を理解することは、すでに私の考えの3日目です。ねえ......................
もう1つのポイントがあります。完全な選択ボックスは、実際にはチェック済みを宣言します。v-model= "checked" vueではfalseであるため、状態を選択および選択解除し、クリックイベントを追加するだけで、次のチェックボックスに両方のvが含まれるようになります。 -model = "checkList"要素、任意の名前を取り、バックグラウンドから要求したデータをトラバースし、すべてのデータのcheckListに一意のインデックスを割り当てます。これにより、もちろん、checkedがtrueかfalseかに関係なく、すべてを選択できます。 checkList = []が選択されていない場合は割り当て、配列を空にします。
このコードは、誰もがBaiduで見つけることができます。私は完璧で、私の理解について話します。
別の問題があります。クリックしてすべてを選択し、2番目のページをクリックすると、チェックリストにこれらのインデックスがないため、チェックボックスが同時にキャンセルされます。これは2番目のリクエストのデータです。もちろん、Selectはありません。上記の方法でインデックスをトラバースし、checkListに割り当てるだけで、選択されます。
以下は、対応するコードの一部です
layuiの背景テンプレートを使用しているため、視線を遮るコードは掲載されず、コードの一部が差し引かれる場合があります。
<div class="layui-btn-group classification" v-for="item in datas">
<a class="layui-btn layui-btn-primary" href="javascript:void(0);"
v-on:click="showSong($event)" :id="item.typeId" v-text="item.typeName"></a>
</div>これは分類されたhtmlです
<link rel="stylesheet" href="../../layuiadmin/style/MySong.css" />
<div class="panel-body layadmin-homepage-shadow">
<div class="checkAll">
<label class="my_protocol">
<input class="input_agreement_protocol" type="checkbox"
v-model='checked' v-on:click='checkedAll'/>
</label>
<label>全选</label>
</div>
<ul class="list-inline song">
<li>
<span class="song_left layui-col-md7">歌曲</span>
<span class="layui-col-md3">操作</span>
<span class="singer_right layui-col-md2">歌手</span>
</li>
<li class="layui-col-md12" v-for="(list,index) in checkboxList">
<div class="layui-col-md7 song_left">
<label class="my_protocol">
<input type="checkbox" :value="list.songId"
class="input_agreement_protocol" v-model='checkList'>
<span class="lists">{
{list.songName}}</span>
</label>
</div>
<div class="layui-col-md4 singer_right">
<span class="layui-col-md8">
<i class="layui-icon layui-icon-play"></i>
<i class="layui-icon layui-icon-add-1"></i>
<i class="layui-icon layui-icon-file"></i>
<i class="layui-icon layui-icon-edit"></i>
</span>
<span class="layui-col-md">{
{list.songSinger.singerName}}</span>
</div>
</li>
</ul>
</div>
<div id="pageTool"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script src="../../music/query.js"></script>
<script src="../../music/paging.js"></script>
<script src="../../music/song.js"></script>query.js、paging.js、MySong.cssはすべて他の人のコードからコピーされたもので、コードは投稿されず、Baidu Cloudに直接パッケージ化され、必要に応じて使用されます。
song.js
var app=new Vue({
el:'#app1',
data:{
datas:[],
checkboxList:[],//后台请求的数据
checked: false, //全选框
checkList: [],//选中的索引集合
},
created:function(){
//一次加载的数据（不在更新）
this.showClassification();
},
mounted:function(){
//可变动的数据
this.showSong();
},
methods:{
showClassification:function(){
axios.get('http://127.0.0.1:8045/api/type/selectbysingertypeall',{ //params参数必写 , 如果没有参数传{}也可以
})
.then(function (response) {
var arr=response.data.data.typeAll;
for(var i=0;i<arr.length;i++){
app.datas.push(arr[i]);
}
})
.catch(function (error) {
});
},
showSong:function(e){
var _this=this;
var id=0;
if(e!=undefined){
id=e.target.id;
}
axios.get('http://127.0.0.1:8045/api/findbisinger',{ //params参数必写 , 如果没有参数传{}也可以
params:{
typeId:id//歌手类型
}
}).then(function (response) {
var arr=response.data.data.list;
//直接将后台拿到的数据赋值给checkboxList
app.checkboxList=arr;
console.log(arr);
//因为后台拿到的数据为pageInfo，所以相应的数据
console.log("每页显示条数:"+response.data.data.pageSize+",总数:"+response.data.data.total
+",第几页："+response.data.data.pageNum);
this.$nextTick(pageTool(id,response.data.data.pageSize,response.data.data.total));
}).catch(function (error) {
});
},
checkedAll: function(){
//全选和反选
var _this = this;
// console.log(_this.checked+"---"+_this.checkList+"----"+_this.checkboxList)
this.$nextTick(function() {
//当全选框选中为true时
console.log(_this.checked);
if(_this.checked){
//将后台请求的索引给checkList数组
_this.checkList = _this.checkboxList.map(function(json,index){
console.log(json+","+index)
return json.songId;
})
}else {
//没有选中清空里面数据
_this.checkList = []
}
});
}
},
watch: { //深度 watcher
//监听事件，当这个数组的新数据长度和请求到的分页数据条数一样，设置全选框的v-mode=“checked”的checked为true或false，然后就能相当于取消选中一样的效果
'checkList': {
handler: function(val, oldVal) {
if (val.length === this.checkboxList.length) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
}
});
function pageTool(id,pagesize,count){
//先删除上一个分页HTML
$('#pageTool').children().remove();
//这里会自动生成相应的分页HTML，只要pagesize：每页显示条数，count：请求数据的总数 $('#pageTool').Paging({pagesize:pagesize,count:count,callback:function(page,size,count){
//删除上一页选中项
//去除掉在checked对象中的对象
//遍历获取那一页所有的id，比对选中的数组
console.log("完整的一次复选框",app.checkList);
console.log(app.checked)
// app.checkList=[1,2,3,1238];
$("input:checked").prop('checked','');
axios.get('http://127.0.0.1:8045/api/findbisinger',{
params:{
typeId:id,//歌手类型
pageNo:arguments[0]
}
}).then(function(response){
var arr=response.data.data.list;
app.checkboxList=arr;
//当全选被选中，所有复选框选中
if(app.checked){
app.checkList = app.checkboxList.map(function(json,index){
console.log(json+","+index)
return json.songId;
})
}
}).catch(function(error){
});
// console.log('当前第 ' +page +'页,每页 '+size+'条,总页数：'+count+'页')
}});
}
上記はこれについての私のすべての理解であり、対応するjquery Baiduクラウドはここにあります：リンク：https
：//pan.baidu.com/s/1LtzpK4p-SZldvrDn2-GZwQ抽出コード：acsn
もちろん、完全な独立を達成することもできますvueのページ付けは、よく書かれていて使いやすい場合は、上司が何を書いたかを確認するためにプライベートメッセージを送っていただけませんか。