NestedSortable的学习和吸收

     NestedSortable是一个专门用来排序和处理父子关系的jquery插件, 在众多的jquery插件中, 只有nestedsortable这个插件做的出众, 不但界面清爽, 操作简单, 还提供了包含以传输json格式数据的ajax请求方式的widget.

     正好我做的项目里有一个地方要用到排序和调整父子关系, 原来是拆开成两部分实现的, 一部分管排序, 一部分管父子关系, 两部分互相没有关联. 其中父子关系部分需要输入相关id来注明,使用起来很笨拙, 数据还经常因为误操作而出一些莫明其妙的错误.

     用nestedsortable来替代这两个部分是不二之选, (这个开源项目在这里) 它包含两个部分, 一个是单纯的jquery插件, 不带ajax请求部分, 但留了onChange的接口, 可供使用者进一步定制. 另外一部分是widget, jquery并没有明确的widget定义, 不象dojo, 对widget有明确的定义, 基本上就是围绕着widget展开的. jquery更加着重于语言本身的功能性, 这里nestedsortable widget可以理解成作者已经为用户写好了所有界面, 只要提供数据进去, 格式化好的带有界面的结果就显示出来了, 包括界面上save按钮的相关功能一并定义好了, 用户只要写服务器端的处理逻辑即可. 缺点是体积比较大, 比插件大三倍.

     粗看下来, 当然nestedsortable widget是首选, 代码量很小, 没啥要特别处理的地方, 只要关心源数据和返回的结果数据即可. 三下五除二写好相关代码之后, 试了十几条数据, 一切正常. 但大多数情况下, 数据量一般是一二百条, 极端情况会达到一千条左右, 当载入一千条数据的时候, javascript报错, 说是堆栈溢出.

     回头去查nestedsortable的api, 发现有分页功能, 分好页面后, 载入一千条数据时再也不报错了, 但新的问题有出现了, 排序功能不正常. 例如, 一共五页, 第三页的几条数据要换到第一页, 结果第二页的数据序号无法正常更新. 细看之下发现, 传回服务器端的数据被分为两部分, 即第一页和第三页, 其他页的没有. 试了很多变通的方法, 想依靠回传的结果数据推断剩余页面的变动, 都无法走通.

     nestedsortable的作者说wordpress就是用他这个widget实现排序的, 而且说服务器端的逻辑只要一点小技巧就可以处理了. 只好又去wordpress网站下载源代码, 安装起来之后, 耐着性子查找相关排序的逻辑. 经过输入一定量的数据之后, 结合数据库里的数据和代码逻辑发现, 作者在相关表里对排序id的使用方式和我所作项目的差别很大. 他的排序id是辅助性的字段, 并未严格+1, 换言之, 如果ddd应该排在rrr后面,那么rrr给个90, ddd给个503就可以了. 这样的话, 按照前面分成5页的例子, 他的排序逻辑确实可以按照返回的两段数据, 按照大概数字, 为剩余页面加上个大数字,不重复即可. 我的项目不能按照这个逻辑做, 这条路等于行不通.

     那么能否改变这个widget回传的数据呢? 在分页状态下, 不管有几页变动, 把所有结果都返回回来. 仔细看了widget里面的相关代码, 发现它也是基于另一个jquery插件Interface, 这个Interface设计的模式就是把被drag和drop的页面元素的值返回回来. 而要改变这个模式也有违这个插件的设计思想, 是不可能做到的. 这条路也走不通.

     现在的情况变成了, 要分页就要解决回传数据的问题, 要不分页就要解决堆栈溢出的问题. 前者探索的结果是行不通, 后者,我试着debug到溢出处, 同样也是Interface插件的一部分,发现引用这个变量的地方很多, 要改几乎不可能.

     这种情况下这能退回到原点, 选择nestedsortable widget看来是个错误, 而nestedsotable插件还可以试一试. 因为nestedsortable插件需要用户准备数据, 逻辑上要麻烦一些, 而且ajax的请求也要自己写. 但从另外一个角度讲, 它不用参与到数据解析, 也就不存在前面遇到的堆栈溢出的问题,性能反而好. 编程上多花一些时间, 并且可以借鉴部分nestedsortable widget的代码, 能走通这条路还是值得的.

     所以,在了解了nestedsortable插件的api之后,

          1. 不分页.

          2. 自己编程解析由变动元素传回的数据.

          3.  然后格式化为json格式,回传给server.

      至此, 问题终于解决.

 

      有几点体会如下, 原以为jquery语法好懂, 插件的开发大概看看也应该能看懂, 结果看了很久也还是很糊涂, 结果还是老老实实退回去读书, 了解plugin的开发规范. 另外, 要找一个好的编辑器, 尤其要能让你看清左括号和又括号的. ultraedit可以看,但是不明显,也没有快捷键可以让人在左括号和右括号之间跳转, 我用的jedit就有这个功能, 光标在左括号上, 按住ctrl+]键就能跳转到右括号上, 这样分辨javascript的一段一段代码非常容易, 如果靠肉眼看, 出错的机会太大了, 增加了理解代码逻辑的难度.