码云 Gitee IDE 全新上线——支持 Git 管理的轻量在线编码环境
0 Watch 1 Star 0 Fork 0

立志尚早 / jLSortJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于jQuery的数据排序插件 https://www.fenglinwan.xin/zero/lab/sort.html
一键复制 编辑 Web IDE 原始数据 按行查看 历史
readme.md 2.41 KB
jiangli 提交于 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": "系统配置管理"
}]

拖曳模式:

排序前:

排序后:

评论 ( 0 )

你可以在登录后,发表评论

搜索帮助