搜索
aardio官方社区 门户 查看主题

sortable-grid的排序问题

发布者: 四月物语 | 发布时间: 2017-4-16 11:33| 查看数: 912| 评论数: 11|帖子模式

应用了behavior:sortable-grid后,点击表头只能排一次序,
再点表头无效。
我把web.layout.behavior.sortableGrid库修改了下,希望既能升序排列
又能降序排列,但是不行,不知道哪个地方错了
  1. //sortableGrid 排序网格
  2. import web.layout.behavior.grid;

  3. namespace web.layout.behavior;

  4. var super = grid;
  5. namespace sortableGrid;

  6. onKeyDown =  super.onKeyDown;
  7. onMouseDblClick = super.onMouseDblClick;

  8. var sortableGrid = self;
  9. namespace sinking {
  10.         //鼠标以SINKING(捕获模式)向下传递下,使用sinking名字空间响应事件
  11.        
  12.         onMouseDown = function (ltTarget,ltOwner,x,y,mouseParams) {
  13.                 //sortableGrid传给onMouseDblClick的owner参数,使之可以通过owner对象调用重写后的owner.onColumnClick
  14.                 return sortableGrid.onMouseDblClick(ltTarget,ltOwner, x,y,mouseParams,true)
  15.         }
  16. }

  17. onColumnClick = function(ltOwner, ltTarget ){
  18.     super.onColumnClick(ltOwner, ltTarget);
  19.     var current = ltOwner.querySelector("th:checked");
  20.     if( current == ltTarget )
  21.                 return; // already here, nothing to do.

  22.     if( current )
  23.             ltOwner.state.checked = false;
  24.            
  25.     ltTarget.state.checked = true;
  26.    
  27.     var elTrCurrent = super.getCurrentRow( ltOwner );
  28.     var bool=(bool==1);
  29.     var columnNo = ltTarget.index();
  30.     if( bool ){
  31.      ltOwner.sort(
  32.             function(ltOwner,ltEle2){
  33.                     return ltOwner.child(columnNo).innerText > ltEle2.child(columnNo).innerText
  34.                             ? -1 : 1;
  35.                    
  36.             },super.fixedRows(ltOwner)
  37.            
  38.             )       
  39.     bool=0;
  40.     }
  41.     else{
  42.             /*不符合条件时执行的代码块*/
  43.      ltOwner.sort(
  44.             function(ltOwner,ltEle2){
  45.                     return ltOwner.child(columnNo).innerText < ltEle2.child(columnNo).innerText
  46.                             ? -1 : 1;
  47.                    
  48.             },super.fixedRows(ltOwner)
  49.            
  50.             )
  51.     bool=1;
  52.     }
  53.         
  54.         if( elTrCurrent )
  55.             elTrCurrent.scrollToView();
  56. }

  57. /*
  58. 修正智能提示
  59. elTrCurrent = ltOwner
  60. */
复制代码

最新评论

四月物语 发表于 2017-4-16 11:36:46
测试代码
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="HTMLayout 无边框窗体";right=759;bottom=469;parent=...)
  4. winform.add()
  5. /*}}*/

  6. import web.layout;
  7. import web.layout.behavior.windowCommand;//导入behavior:windowCommand;
  8. var wbLayout = web.layout( winform );//在窗体上创建HTMLayout对象

  9. import web.layout.behavior.sortableGrid;

  10. wbLayout.html = /**  
  11. <html>
  12. <head>
  13. <style>

  14. html
  15. {
  16.   background-color: white white cornsilk cornsilk;
  17. }

  18. table
  19. {
  20.   //background: linen;
  21.   overflow:auto;
  22.   width:*;
  23.   height:*;
  24.   behavior:sortable-grid column-resizer;
  25.   border:1px solid rosybrown;
  26. }

  27. @media print {
  28.     table {overflow:none; }
  29. }

  30. table th
  31. {
  32.   height:1.3em;
  33.   background-color: rosybrown;
  34.   color:white;
  35. }

  36. table th:checked
  37. {
  38.   foreground-image: url(stock:arrow-down);
  39.   foreground-repeat: no-repeat;   
  40.   foreground-position-top: 50%;   
  41.   foreground-position-right: 5px;   
  42. }
  43. table th:nth-child(1)
  44. {
  45.   width:1*;
  46. }
  47. table th:nth-child(2)
  48. {
  49.   width:2*;
  50. }

  51. table td
  52. {
  53.   border:1px solid rosybrown;
  54.   white-space:nowrap;
  55.   height:1.3em;
  56.   overflow:hidden;
  57.   text-overflow:ellipsis;
  58. }

  59. table tr:current
  60. {
  61.   background-color: peachpuff;
  62. }

  63. </style>
  64. </head>
  65. <body>

  66. <p>Sortable grid sample. Click on column header will reorder table.</p>

  67. <table fixedrows="1" fixedlayout>
  68. <tr><th>num</th><th>str</th></tr>
  69. <tr><td>9</td><td>dd</td></tr>
  70. <tr><td>5</td><td>aa</td></tr>
  71. <tr><td>2</td><td>cc</td></tr>
  72. <tr><td>7</td><td>bb</td></tr>
  73. </table>
  74. </body>
  75. </html>

  76. **/
  77. winform.show();
  78. win.loopMessage();
复制代码
rotou 发表于 2017-4-16 15:49:49

  1. //sortableGrid 排序网格
  2. import web.layout.behavior.grid;

  3. namespace web.layout.behavior;

  4. var super = grid;
  5. namespace sortableTable;

  6. onKeyDown =  super.onKeyDown;
  7. onMouseDblClick = super.onMouseDblClick;

  8. var sortableGrid = self;
  9. state=true;
  10. namespace sinking {
  11.         //鼠标以SINKING(捕获模式)向下传递下,使用sinking名字空间响应事件
  12.         
  13.         onMouseDown = function (ltTarget,ltOwner,x,y,mouseParams) {
  14.                 //sortableGrid传给onMouseDblClick的owner参数,使之可以通过owner对象调用重写后的owner.onColumnClick
  15.                 return sortableGrid.onMouseDblClick(ltTarget,ltOwner, x,y,mouseParams,true)
  16.         }
  17. }

  18. onColumnClick = function(ltOwner, ltTarget ){
  19.     super.onColumnClick(ltOwner, ltTarget);
  20.     var current = ltOwner.querySelector("th:checked");
  21.    
  22.     //if( current == ltTarget )
  23.     //            return; // already here, nothing to do.

  24.     if( current )
  25.             ltOwner.state.checked = false;
  26.             
  27.     ltTarget.state.checked = true;
  28.    
  29.     var elTrCurrent = super.getCurrentRow( ltOwner );
  30.   
  31.     var bool=true;
  32.     if(ltOwner.Up===null)
  33.     {
  34.             ltOwner.Up=true;// init value       
  35.     }
  36.     else{
  37.    
  38.             if(ltOwner.Up==false)
  39.             {
  40.                     bool=false;
  41.             }
  42.     }
  43.    

  44.     var columnNo = ltTarget.index();
  45.     if( bool ){
  46.      ltOwner.sort(
  47.             function(ltOwner,ltEle2){
  48.                     return ltOwner.child(columnNo).innerText > ltEle2.child(columnNo).innerText
  49.                             ? -1 : 1;
  50.                     
  51.             },super.fixedRows(ltOwner)
  52.             
  53.             )        
  54.     ltOwner.Up=false;
  55.     }
  56.     else{
  57.      
  58.             /*不符合条件时执行的代码块*/
  59.      ltOwner.sort(
  60.             function(ltOwner,ltEle2){
  61.                     return ltOwner.child(columnNo).innerText < ltEle2.child(columnNo).innerText
  62.                             ? -1 : 1;
  63.                     
  64.             },super.fixedRows(ltOwner)
  65.             
  66.             )
  67.    ltOwner.Up=true;
  68.     }
  69.         
  70.         if( elTrCurrent )
  71.             elTrCurrent.scrollToView();
  72. }

  73. /*
  74. 修正智能提示
  75. elTrCurrent = ltOwner
  76. */
复制代码
rotou 发表于 2017-4-16 15:53:00

Note:  behavior:sortable-table
四月物语 发表于 2017-4-16 17:16:25

谢谢。表头图标还有点问题,排序后图标没变,我研究下
四月物语 发表于 2017-4-16 23:34:12

不知道在库里哪个文件能 修改表头上下箭头?
看来看去,没有思路
Jacen.He 发表于 2017-4-17 08:56:02
四月物语 发表于 2017-4-16 23:34
不知道在库里哪个文件能 修改表头上下箭头?
看来看去,没有思路

CSS里任何图像都能改,找个CSS入门教程看一下,不去学习纠结到死也不会有思路。

Jacen.He 发表于 2017-4-17 09:04:32
都没改对,库里原来这句代码写错了:
if( current )
    ltOwner.state.checked =
false;

应该是

if( current )
    current.state.checked =
false;

意思是把上一个选中的项 - 复原为未选状态,否则就只能选一次,失去开关的效果。

现在我已经改了,并且增加了双向排序效果,CSS里指定箭头的代码:

table th:checked[order=down]  
{
  foreground-image: url(stock:arrow-up);
  foreground-repeat: no-repeat;   
  foreground-position-top: 50%;   
  foreground-position-right: 5px;   
}
table th:checked[order=up]
{
  foreground-image: url(stock:arrow-down);
  foreground-repeat: no-repeat;   
  foreground-position-top: 50%;   
  foreground-position-right: 5px;   
}

foreground-image 里可以换成自己的图像。


四月物语 发表于 2017-4-17 22:04:50
Jacen.He 发表于 2017-4-17 08:56
CSS里任何图像都能改,找个CSS入门教程看一下,不去学习纠结到死也不会有思路。


刚开始以为是在库里修改的箭头
原来是在css里
foreground-image: url(stock:arrow-down);
四月物语 发表于 2017-7-24 19:09:20
又遇到问题了,最新的库文件排序只能按字符串方式来排序,数字也按字符串排序。innerText返回的是字符串,数字也是字符串。
messias 发表于 2017-11-7 13:23:50
  1. onMouseClick = function (ltTarget,ltOwner,x,y,mouseParams){   //ltTarget.tagName="text",ltOwner.tagName="table"(或者"th",行为目标节点)
  2.         if ltOwner.tagName=="th" {                                //behavior放到"th"节点
  3.                 //ltOwner.parent().parent().postEvent( "onTableHeaderClick", ltOwner.index(), ltOwner);  这个不知作用
  4.             var current = ltOwner.parent().querySelector("th:checked");
  5.                 if( current && ( current != ltOwner ) ){
  6.                         current.state.checked = false;
  7.                         current.order = "down";
  8.                 };
  9.             ltOwner.state.checked = true;
  10.             reorder(ltOwner.parent().parent(), ltOwner);        //ltOwner.parent().parent()是table节点
  11.         }
  12. }
  13. reorder = function(ltOwner, ltTarget){                      //table和th
  14.         var order = ltTarget.order;
  15.         var columnNo = ltTarget.index();
  16.         if( order != "up" ){
  17.                 ltOwner.sort(
  18.                     function(ltOwner,ltEle2){
  19.                             return ltOwner.child(columnNo).innerText < ltEle2.child(columnNo).innerText ? -1 : 1;
  20.                     },2                                              //fixedRows=2(这里是从2行开始),和html里的fixedRows=1不同(固定第1行)
  21.             )
  22.             ltTarget.order = "up"
  23.     }
  24.     else {
  25.                 ltOwner.sort(
  26.                     function(ltOwner,ltEle2){
  27.                             return ltOwner.child(columnNo).innerText > ltEle2.child(columnNo).innerText ? -1 : 1;
  28.                     },2
  29.             )
  30.             ltTarget.order = "down";
  31.     }
  32.    ltTarget.parent().scrollToView();
  33. }
复制代码


自己重新整理了,原因是碰到null值排序会报错,处理填入的值很麻烦而且难看。
但我这里面对于null值没有处理,自己搞吧。
css按照校长的写就是,在我自己这里调试成功。
messias 发表于 2017-11-7 13:25:28
四月物语 发表于 2017-7-24 19:09
又遇到问题了,最新的库文件排序只能按字符串方式来排序,数字也按字符串排序。innerText返回的是字符串, ...

自己改一下排序函数就是了

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-11-23 20:44 , Processed in 0.078125 second(s), 18 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表