整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
插入排序是將數(shù)組分為待排序和已排序兩個(gè)區(qū)間。依次從待排序區(qū)間中取出一項(xiàng)，用該項(xiàng)跟已排序區(qū)間項(xiàng)逐個(gè)對(duì)比，通過位移來實(shí)現(xiàn)插入到對(duì)應(yīng)位置的排序方式。插入排序平均時(shí)間復(fù)雜度是：O(n^2)
步驟是：
插入排序有多種實(shí)現(xiàn)方式，這里介紹常見的3種：
1、通用實(shí)現(xiàn)方式，自左往右遍歷待排序數(shù)組，再?gòu)漠?dāng)前的左側(cè)位置開始自右往左循環(huán)已排序數(shù)組，再逐個(gè)比較和移動(dòng)被比較項(xiàng)，最后將當(dāng)前項(xiàng)填入到空缺位置上。
2、利用數(shù)組splice方法，類似打撲克牌，先拿出要排序的牌，然后找準(zhǔn)位置插入。這種方式利用了原生API，減少了數(shù)組反復(fù)移動(dòng)位置的操作。性能上之前差不多。
3、新建數(shù)組法與splice結(jié)合法，這種方式會(huì)多建立一個(gè)數(shù)組，也就會(huì)多占用一個(gè)空間，但理解起來最容易，也利用了JS語言的特性。
插入排序與冒泡、選擇都是比較簡(jiǎn)單好懂的排序方式，性能上也差不多。插入排序通俗來講就像打撲克牌排序，你抓了一手牌之后。假如是：2、1、5、3、4，你會(huì)：
1、先把牌分成兩組，假定左側(cè)第一張牌為一組(標(biāo)識(shí)A，這時(shí)只有2)，其他牌為另外一組(標(biāo)識(shí)B，包括1、5、3、4)。
2、從B組里面從左起選擇第一張牌（位置空出等待填充），也就是1，拿這張牌與A組里面從右往左挨個(gè)對(duì)比，當(dāng)遇到比這張牌還小時(shí)就在這個(gè)位置停留下來(如果A組全部比這張牌都大那就在A組最前面停留下來，如果A組里沒有比這張牌大的就在當(dāng)前位置停留)。
3、然后將A組里比這張牌(也就是1)大的牌逐個(gè)往右移動(dòng)1位，原B組空出位置被填充，此時(shí)剛才停留的位置空出，將1這張牌插入在這里。這時(shí)候A組增加一個(gè)數(shù)字，變?yōu)椋?、2，B組減少1個(gè)，變?yōu)椋?、3、4。
4、移動(dòng)指針，繼續(xù)指向B組的第一個(gè)，也就是5。用5這張牌重復(fù)第二部，即拿5去跟A組自右往左逐個(gè)比較，然后插入到A組。此時(shí)A組：1、2、5，B組：3、4。
5、將B組里數(shù)字按照第二部重復(fù)操作，直到B組為空時(shí)整個(gè)循環(huán)結(jié)束。此時(shí)A組為：1、2、3、4、5。
我們都知道普通的HTML自帶的功能相對(duì)有限，很多復(fù)雜的交互式場(chǎng)景，如果手動(dòng)去寫功能的話會(huì)非常的復(fù)雜，而且可擴(kuò)展性差，就拿HTML表格來說，對(duì)于初學(xué)者或者對(duì)于復(fù)雜的拖拽式交互編程不熟悉的話會(huì)很浪費(fèi)時(shí)間，因此今天就介紹一個(gè)第三方的插件——Table-draagger，來輕松實(shí)現(xiàn)類似的功能。Table-draagger是用于構(gòu)建可重排序的拖放表的極簡(jiǎn)主義純Javascript庫(kù)！
https://github.com/sindu12jun/table-dragger
Table-draagger因?yàn)槠湟韵聨讉€(gè)特征而讓拖拽和排序的實(shí)現(xiàn)變得如此簡(jiǎn)單：
可以在npm上獲得它：
npm install table-dragger --save
或者引用壓縮的js文件
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
或者嘗試開發(fā)中的不穩(wěn)定版本
npm install table-dragger@next --save
請(qǐng)看以下代碼：
import tableDragger from 'table-dragger' tableDragger(el, options?)
<table id="table"> <thead> <tr> <th class='handle'>header1</th> <th class='handle'>header2</th> </tr> </thead> <tbody> <tr> <td>conten1</td> <td>conten2</td> </tr> </tbody> </table>
var el=document.getElementById('table');
var dragger=tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});
你可以在不設(shè)置任何參數(shù)的情況下使用默認(rèn)的拖拽和排序方式，當(dāng)然以下是你可以配置的選項(xiàng)：
1、將mode設(shè)置為column，用戶拖動(dòng)和排序表的列
2、將mode設(shè)置為row，用戶拖動(dòng)并排序表的行
3、設(shè)置mode為free，用戶根據(jù)點(diǎn)擊后鼠標(biāo)移動(dòng)的方向拖動(dòng)行或列。注意，必須在自由模式下指定dragHandler。
dragHandler是表中的拖動(dòng)句柄選擇器默認(rèn)情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。
在行模式下將onlyBody設(shè)置為true時(shí)，用戶只能在tbody中提升行。
下面是返回對(duì)象的API
tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', ()=> {
console.log('drag');
})
.on('drop', (from, to, el, mode)=> {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode)=> {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode)=> {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});
Table-draagger為我們節(jié)省了很多手動(dòng)封裝表格排序和拖拽功能的時(shí)間，當(dāng)然目前很多第三方框架已經(jīng)實(shí)現(xiàn)了類似的功能，這更適用于原生的html表格，你還可以通過一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~
我們都知道普通的HTML自帶的功能相對(duì)有限，很多復(fù)雜的交互式場(chǎng)景，如果手動(dòng)去寫功能的話會(huì)非常的復(fù)雜，而且可擴(kuò)展性差，就拿HTML表格來說，對(duì)于初學(xué)者或者對(duì)于復(fù)雜的拖拽式交互編程不熟悉的話會(huì)很浪費(fèi)時(shí)間，因此今天就介紹一個(gè)第三方的插件——Table-draagger，來輕松實(shí)現(xiàn)類似的功能。Table-draagger是用于構(gòu)建可重排序的拖放表的極簡(jiǎn)主義純Javascript庫(kù)！
https://github.com/sindu12jun/table-dragger
Table-draagger因?yàn)槠湟韵聨讉€(gè)特征而讓拖拽和排序的實(shí)現(xiàn)變得如此簡(jiǎn)單：
可以在npm上獲得它：
npm install table-dragger --save
或者引用壓縮的js文件
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
或者嘗試開發(fā)中的不穩(wěn)定版本
npm install table-dragger@next --save
請(qǐng)看以下代碼：
import tableDragger from 'table-dragger' tableDragger(el, options?)
<table id="table"> <thead> <tr> <th class='handle'>header1</th> <th class='handle'>header2</th> </tr> </thead> <tbody> <tr> <td>conten1</td> <td>conten2</td> </tr> </tbody> </table>
var el=document.getElementById('table');
var dragger=tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});
你可以在不設(shè)置任何參數(shù)的情況下使用默認(rèn)的拖拽和排序方式，當(dāng)然以下是你可以配置的選項(xiàng)：
1、將mode設(shè)置為column，用戶拖動(dòng)和排序表的列
2、將mode設(shè)置為row，用戶拖動(dòng)并排序表的行
3、設(shè)置mode為free，用戶根據(jù)點(diǎn)擊后鼠標(biāo)移動(dòng)的方向拖動(dòng)行或列。注意，必須在自由模式下指定dragHandler。
dragHandler是表中的拖動(dòng)句柄選擇器默認(rèn)情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。
在行模式下將onlyBody設(shè)置為true時(shí)，用戶只能在tbody中提升行。
下面是返回對(duì)象的API
tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', ()=> {
console.log('drag');
})
.on('drop', (from, to, el, mode)=> {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode)=> {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode)=> {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});
Table-draagger為我們節(jié)省了很多手動(dòng)封裝表格排序和拖拽功能的時(shí)間，當(dāng)然目前很多第三方框架已經(jīng)實(shí)現(xiàn)了類似的功能，這更適用于原生的html表格，你還可以通過一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
