『贴代码』
PasteSpider
PasteForm
精选作品
优选问答
成长笔记
PasteForm框架之表格列的排序的实现
作为管理端，表格页面大量用于数据显示，那么在PasteForm中是如何实现列的排序的问题呢？
说明
我们都知道，表格分行和列，行用orderby进行排序查询，那么列是如何排序的呢？
后端排序
在PasteForm中，列的顺序和你得Dto的字段排序有关，也和继承有关！
细心的你可能会发现，表单的排序和表格的排序，对于后端来说是同样适用的！
你可以在字段中标记[PasteSort]进行标注
假设我们有一个测试表，字段如下
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableAddDto
{
///<summary>
///姓名 模拟短文本输入
///</summary>
[Required]
[MaxLength(16)]
[Description("姓名 模拟短文本输入")]
public string Name { get; set; }
///<summary>
///头像 模拟图片上传
///</summary>
[MaxLength(128)]
[PasteImage(1, "head", "120*120")]
[Description("头像 模拟图片上传")]
public string Head { get; set; }
///<summary>
///年龄 模拟输入number
///</summary>
[PasteUnit("周岁")]
[Description("年龄 模拟输入number")]
public int Age { get; set; }
///<summary>
///会员周期 会员生效区间
///</summary>
[PasteDaterange("dateStart", "dateEnd")]
[Description("会员周期 会员生效区间")]
public DateTime DateStart { get; set; }
///<summary>
///会员周期 会员生效区间
///</summary>
[PasteHidden()]
[Description("会员周期 会员生效区间")]
public DateTime DateEnd { get; set; }
///<summary>
///余额 数据库是分为单位，UI中是以元为单位
///</summary>
[PasteFenToYuan()]
[Description("余额 数据库是分为单位，UI中是以元为单位")]
public int Balance { get; set; }
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableUpdateDto : TestTableAddDto
{
///<summary>
///ID
///</summary>
[PasteHidden]
[Description("ID")]
public int Id { get; set; }
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableDto : TestTableUpdateDto
{
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableListDto : TestTableUpdateDto
{
}
这个时候，如果我们运行，会发现排序就是按照字段顺序执行的
如果我们对现有的进行调整下
调整如下，主要修改几个要点
/// <summary>
///
/// </summary>
public class TestTableBase
{
///<summary>
///姓名 模拟短文本输入
///</summary>
[Required]
[MaxLength(16)]
[Description("姓名 模拟短文本输入")]
public string Name { get; set; }
///<summary>
///头像 模拟图片上传
///</summary>
[MaxLength(128)]
[PasteImage(1, "head", "120*120")]
[Description("头像 模拟图片上传")]
public string Head { get; set; }
///<summary>
///年龄 模拟输入number
///</summary>
[PasteUnit("周岁")]
[PasteSort(100)]
[Description("年龄 模拟输入number")]
public int Age { get; set; }
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableAddDto : TestTableBase
{
/////<summary>
/////姓名 模拟短文本输入
/////</summary>
//[Required]
//[MaxLength(16)]
//[Description("姓名 模拟短文本输入")]
//public string Name { get; set; }
/////<summary>
/////头像 模拟图片上传
/////</summary>
//[MaxLength(128)]
//[PasteImage(1, "head", "120*120")]
//[Description("头像 模拟图片上传")]
//public string Head { get; set; }
/////<summary>
/////年龄 模拟输入number
/////</summary>
//[PasteUnit("周岁")]
//[Description("年龄 模拟输入number")]
//public int Age { get; set; }
///<summary>
///会员周期 会员生效区间
///</summary>
[PasteDaterange("dateStart", "dateEnd")]
[Description("会员周期 会员生效区间")]
public DateTime DateStart { get; set; }
///<summary>
///会员周期 会员生效区间
///</summary>
[PasteHidden()]
[Description("会员周期 会员生效区间")]
public DateTime DateEnd { get; set; }
///<summary>
///余额 数据库是分为单位，UI中是以元为单位
///</summary>
[PasteFenToYuan()]
[Description("余额 数据库是分为单位，UI中是以元为单位")]
public int Balance { get; set; }
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableUpdateDto : TestTableAddDto
{
///<summary>
///ID
///</summary>
[PasteHidden]
[Description("ID")]
public int Id { get; set; }
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableDto : TestTableUpdateDto
{
}
///<summary>
///测试表 用于测试CURD的表
///</summary>
[Description("测试表 用于测试CURD的表")]
public class TestTableListDto : TestTableUpdateDto
{
/// <summary>
/// 标识
/// </summary>
[Description("标识")]
public new int Id { get; set; }
///<summary>
///余额 数据库是分为单位，UI中是以元为单位
///</summary>
[PasteFenToYuan()]
[PasteSort(-10)]
[Description("余额 数据库是分为单位，UI中是以元为单位")]
public new int Balance { get; set; }
}
上面有几个要点
!!!继承
先读取当前CLASS的字段信息，按照正常顺序，然后依次读取上一级的！
!!!排序
如果标注了PasteSort的，则按照从小到大排序，这里有一个规则，没有标注的Sort为0
排序的时候是，小于0的拿出来排序获得A，然后大于0的拿出来排序获得B，没有标注的，也就是0的按照读取顺序获得C
最后组合而成ACB
同样的这个规则适用于表单，也适用于表格！
前端排序
上面说了是后端排序，所以后端排序肯定是对所有人适用的，那么是否可以对我本人适用呢？？？
那就是前端排序的干活!
在PasteForm页面中有一个配置信息，比方说index.js中有
/**
* 配置信息，配置这个模型名称
*/
var _config = {
className: '',//需要和路径的一致，表示后端的对象
model: 'view',//当前模式view bind select
menubox: false,//是否有按钮盒子
enable_view: false,//默认不显示详细
disable_del: true,//默认禁止删除
next: null,
show_type: 'table',//table表格显示chart图表显示
ui_model: false,//是否被激活为table或者chart模式
exchange_id: "id",//主键字段，默认为id
show_key: true,//是否显示默认的id这个字段，也就是表的主键，有时候不想显示
single_select: true,//选择模式下，是否是单选模式，默认是单选模式
select_num: 1,//选中多少个后确定
page_size: [20, 50, 100, 200],//分页的大小
page_default_size: 20,//默认的分页大小
drag_order_column: false,//拖拽修改列顺序
batch: false//是否启用批量操作
};
上面的drag_order_column就是排序的意思，你可以这么启动它，比如我的权限的菜单地址
./pasteform/index.html?path=roleInfo
我把它改成
./pasteform/index.html?path=roleInfo&drag_order_column=true
也就是配置支持从url中的query获取
重新加载后，你会发现看到如下图
你会看到列后面有::这样的图标
用鼠标按住他，就可以移动列的顺序了
然后你关掉，重新打开，会看到还是你刚刚的顺序！！！
如何恢复默认排序?
你可以点击
功能按钮的这个图标，就是删除保存的拖拽排序数据，点击后会重新加载当前页面，就会恢复默认排序了!
评论列表
贴代码
快捷注册
相关推荐
用户问答更多
PasteForm,神奇了啊！都说低代码，低代码，那个是对于非开发者来说的，感觉PasteForm就是开发者的低代码啊！只要配置好Model,就有对应的CRUD操作，还带一些逻辑，和生成代码是两码事了！！！问题来了，有什么局限性，或者适用哪些场景？
07月份版本的内存占用比以前大了，也没有泄漏，啥情况？以前200MB，这个版本能到300MB
文档中的组织归属有些问题，啥时候看看，更新更新！
已经升级了，主要是left join的查询的时候没有过滤，其实这个问题，多租户也是一样的！
最新动态
- 59.****.252 正在查看 主页pasteform !
- 59.****.198 正在查看 主页pastespider !
- 59.****.252 正在查看 主页pastespider !
- 59.****.198 正在查看 主页talk !
- 59.****.198 正在查看 主页pastespider !
- 66.****.137 正在查看 PasteSpider中关于Nginx的配置，安装PasteSpider之后查阅 !
- 92.****.216 正在查看 PasteForm中如何处理批量操作? !
- 37.****.128 正在查看 PasteForm中如何处理批量操作? !
- 59.****.210 正在查看 主页pastespider !
- 59.****.210 正在查看 主页pastespider !
- 59.****.210 正在查看 主页pastespider !
