8月18日(周六)成都源创会火热报名中,四位一线行业大牛与你面对面,探讨区块链技术热潮下的冷思考。
Watch Star Fork

立志尚早 / jLSortJavaScriptMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于jQuery的数据排序插件 https://www.fenglinwan.xin/zero/lab/sort.html
Copy Edit Raw Blame History
readme.md 2.41 KB jiangli authored 2018-03-16 19:08 . 初始化

约定

初始化及提交的数据均为json字符串

使用

引用项目中的以下文件即可

<div id="sort"/>
$(function () {
    $('#sort').jLSort({
        url: 'http://xxxx/getdata',
        submitUrl: 'http://xxxx/submitdata',
        width: 200,
        valueField:'m_id',
        textField:'m_cName'
    });
    
    //重新加载
    $('#sort').jLSortReload();
});

可配置参数说明

  • title:标题文本,默认为'数据排序',可选
  • model:组件操作模式,select和drag,默认为select,可选
  • width:组件宽度,select模式下默认最小宽度550px,drag模式下默认最小宽度220px
  • height: 组件高度,默认最小350px
  • valueField:排序选项的值,为json数据中key值,默认为value
  • textField:排序选项的文本,为json数据中key值,默认为text
  • url::获取远程数据的地址,必选
  • params:获取远程数据的参数,可选
  • submitUrl:提交数据的地址,必选
  • submitParams:提交数据额外传的参数,可选,参数名不可为data

方法

  • jLSortReload(),重新加载

例如

初始数据:

[{
	"m_cName": "系统管理",
	"m_id": "76984b9a-8425-459b-8eb5-6c376af540da"
}, {
	"m_cName": "博客管理",
	"m_id": "4028e569525cc78201525cc884690001"
}, {
	"m_cName": "个人中心",
	"m_id": "4028e569525cc78201525cf20a4b0004"
}, {
	"m_cName": "系统配置管理",
	"m_id": "4028e575531208f801531250b4490001"
}, {
	"m_cName": "爱与回忆",
	"m_id": "402886415a6e33a5015a6e3921640000"
}]

界面样式:

排序操作:

后台接收:

[{
	"m_id": "402886415a6e33a5015a6e3921640000",
	"m_cName": "爱与回忆"
}, {
	"m_id": "4028e569525cc78201525cc884690001",
	"m_cName": "博客管理"
}, {
	"m_id": "4028e569525cc78201525cf20a4b0004",
	"m_cName": "个人中心"
}, {
	"m_id": "76984b9a-8425-459b-8eb5-6c376af540da",
	"m_cName": "系统管理"
}, {
	"m_id": "4028e575531208f801531250b4490001",
	"m_cName": "系统配置管理"
}]

拖曳模式:

排序前:

排序后:

Comment ( 0 )

You need to Sign in for post a comment