|
楼主 |
发表于 2018-5-8 07:52:44
|
显示全部楼层
本帖最后由 金满斗 于 2018-5-8 09:19 编辑
把我自己哪老库整理和修改的发上来吧,方便以后的人。注意这个mygrip这个库没做表的严格判断,表最好按thead,tbody,tfoot格式严格书写。表头上加了sort的class属性的就排序。
- import win.ui;
- /*DSG{{*/
- var winform = win.form(text="HTMlayout 无边框窗体";right=656;bottom=587;parent=...)
- winform.add(
- custom={cls="custom";text="custom";left=21;top=13;right=634;bottom=545;z=1}
- )
- /*}}*/
- import console;
- var html = /**
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <style>
- html
- {
- background-color: white white cornsilk cornsilk;
- }
- table
- {
- //background: linen;
- overflow:auto;
- width:*;
- height:*;
- behavior:mygrid ;
- border:1px solid rosybrown;
- }
- table thead tr th {
- border-right:1px solid silver;
- border-bottom:1px solid silver;
- text-align: left;
- }
- table th:checked
- {
- foreground-image: url(stock:arrow-down);
- foreground-repeat: no-repeat;
- foreground-position-top: 50%;
- foreground-position-right: 5px;
- }
- table thead .sort:hover
- {
- foreground-image: url(stock:arrow-down);
- foreground-repeat: no-repeat;
- foreground-position-top: 50%;
- foreground-position-right: 5px;
- }
- 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;
- }
- table th:nth-child(1)
- {
- width:1*;
- }
- table th:nth-child(2)
- {
- width:2*;
- }
- table th:nth-child(3)
- {
- width:2*;
- }
- table th:nth-child(4)
- {
- width:5*;
- }
- table td
- {
- border:1px solid rosybrown;
- white-space:nowrap;
- height:1.3em;
- overflow:hidden;
- text-overflow:ellipsis;
- margin:0px;
- }
- table tr:current
- {
- background-color: peachpuff;
- }
- table>tbody>tr[selected]{background-color:#998844;}
- table input{width:40px;vertical-align:baseline;}
- </style>
- </head>
- <body>
- <h2></h2>
- <table fixedrows="1" >
- <thead>
- <tr><th ><input class="checkall"type="checkbox"data-id="1" />id</th><th class="sort">num</th><th class="sort">str</th><th>这行不排序</th></tr>
- <thead>
- <tbody>
- <tr><td ><input class="checkone" type="checkbox"data-id="1" /></td><td>9</td><td>dd</td><td>dd</td></tr>
- <tr><td><input class="checkone" type="checkbox"data-id="2" /></td><td>5</td><td>aa</td><td>dd</td></tr>
- <tr><td><input class="checkone" type="checkbox"data-id="3" /></td><td>2</td><td>cc</td><td>dd</td></tr>
- <tr><td><input class="checkone" type="checkbox"data-id="4" /></td><td>7</td><td>bb</td><td>dd</td></tr>
- </tbody>
- </table>
- </body>
- </html>
- **/
- import web.sciter;
- namespace web.sciter.behavior.mygrid{
- //取固定表头
- var isMultiple = function(ltOwner) {
- return ltOwner.getAttribute ("multiple") ;
- }
- //取高亮行
- var getCurrentRow = function( elTable ){
- for(i,eleChild in elTable.eachChild() ){
- if( eleChild.state.current )
- return eleChild;
- }
- }
- setCurrentRow = function( elTable, elRow,altState,dblClick,smooth,isRightClick){
- var prev = getCurrentRow( elTable );
- var newRowChecked = 0x40/*_HL_STATE_CHECKED*/ | 0x20/*_HL_STATE_CURRENT*/;
- var oldRowChecked = 0x40/*_HL_STATE_CHECKED*/;
-
- if( isMultiple(elTable) ) {
- if( ( !dblClick ) && isRightClick ){
- if( elRow.state.checked ){
- oldRowChecked = 0;
- }
- }
- else{
- if( altState & 2/*_HL_SHIFT_KEY_PRESSED*/ ) {
- checkAll(elTable, false);
- checkRange(elTable,elRow.index(),true); // from current to new
- oldRowChecked = 0;
- }
- else{
- if (altState & 1/*_HL_CONTROL_KEY_PRESSED*/) {
- setCheckedRow (elTable,elRow, true); // toggle
- newRowChecked = 0;
- }
- else{
- checkAll(elTable, false);
- setAnchor(elTable,elRow.index() );
- }
- oldRowChecked = 0;
- }
- }
- }
-
- if( prev ) {
- if( prev != elRow )
- prev.modifyState( ,0x20/*_HL_STATE_CURRENT*/ | oldRowChecked ); // 删除旧状态标志
- }
- elRow.modifyState( newRowChecked ); // 设置状态标志
- elRow.scrollToView( false,smooth );
-
- elTable.postEvent( dblClick? 0x83/*_HL_TABLE_ROW_DBL_CLICK*/ : 0x82/*_HL_TABLE_ROW_CLICK*/, elRow.index(), elRow);
- elTable.postEvent( "onSelectSelectionChanged" );
- }
- targetRow = function( elTable, ltTarget){
- if( !ltTarget || ltTarget.parent() == elTable)
- return ltTarget;
-
- return targetRow(elTable,ltTarget.parent());
- }
- targetHeader = function(eleHeaderRow, ltTarget ) {
- if( !ltTarget || ltTarget.parent() == eleHeaderRow)
- return ltTarget;
- return targetHeader(eleHeaderRow,ltTarget.parent());
- }
- fixedRows = function( elTable ) {
- var a = elTable.fixedrows : 0; //没找到可能就是传的body,就到父窗口找下
- return ( tonumber( a) : 0 ) + 1;
- }
- setCheckedRow = function( elTable,elRow,toggle) {
- if( toggle ){
- elRow.state.checked = !elRow.state.checked;
- elRow.state.current = elRow.state.checked;
- }
- else
- elRow.state.checked= false;
- }
- getAnchor = function(elTable) {
- var elRow = elTable.querySelector("tr:anchor");
- if( elRow ) return elRow.index();
- return 0;
- }
- setAnchor = function(elTable,idx){
- var elRow = elTable.querySelector("tr:anchor");
- if( elRow ) elRow.state.anchor = false;
-
- elRow = elTable.child(idx);
- if( elRow )
- elRow.modifyState(0x4000/*_HL_STATE_ANCHOR*/,0,false);
- }
-
- var checkRange = function(elTable,idx,check){
- if ( !isMultiple(elTable) ) return;
- var start= getAnchor(elTable);
- var startIdx = ..math.min(start,idx );
- var endIdx = ..math.max(start,idx );
-
- var fRows= fixedRows(elTable);
- if( startIdx < fRows ) startIdx = fRows;
- for(i=endIdx;startIdx;-1){
- varelRow = elTable.child(i);
- if( !! elRow.isVisible() ){
- elRow.state.checked = check;
- }
- }
- }
- //表全选
- var checkAll = function( elTable,onOff ) {
- if(onOff){
- elTable.enumQuery(
- function(ltEle){
- ltEle.selected = "";
- ltEle.$1("input[type=checkbox]").state.checked = true;
- },"tr"
- )
- }
- else {
- elTable.enumQuery(
- function(ltEle){
- ltEle.selected = null;
- ltEle.$1("input[type=checkbox]").state.checked = false;
- },"tr[selected='']"
- )
-
- }
- elTable.postEvent( "onSelectSelectionChanged" ); //改变选项事件
- }
- //单勾选
- var checkone = function(scTarget,onOff){
- if(onOff){
- scTarget.parent().parent().selected="";
- }else {
- scTarget.parent().parent().selected = null;
- }
-
- }
- //排序
- var reorder = function(ltOwner, ltTarget){
- var order = ltTarget.order;
- var columnNo = ltTarget.index();
- var elTrCurrent = getCurrentRow( ltOwner );
-
- if( order != "up" ){
- ltOwner.sort(
- function(ltOwner,ltEle2){
- return (ltOwner.child(columnNo).innerText:"0") < (ltEle2.child(columnNo).innerText:"0")
- ? -1 : 1;
- return 1;/*-1,0,1*/
- },fixedRows(ltOwner)
- )
- ltTarget.order = "up"
- }
- else {
- ltOwner.sort(
- function(ltOwner,ltEle2){
- return (ltOwner.child(columnNo).innerText:"0") > (ltEle2.child(columnNo).innerText:"0")
- ? -1 : 1;
- return 1;/*-1,0,1*/
- },fixedRows(ltOwner)
- )
- ltTarget.order = "down";
- }
-
- if( elTrCurrent )elTrCurrent.scrollToView();
- }
- var onColumnClick = function(ltOwner, ltTarget ){
- ltOwner.postEvent( "onTableHeaderClick", ltTarget.index(), ltTarget);
- var current = ltOwner.parent().querySelector("th:checked"); //因为有的是内容节点,必须获取父节点
- if( current && ( current != ltTarget ) ){
- current.state.checked = false;
- current.order = "down";
- };
-
- ltTarget.state.checked = true;
- reorder(ltOwner, ltTarget );
- }
-
- //按键按下事件
- onMouseDblClick = function (ltTarget,elTable, x,y,mouseParams,isMouseDown) {
- thead = elTable.$1("thead");
- tbody = elTable.$1("tbody");
- tfoot = elTable.$1("tfoot");
- if(tbody || thead){
- var elTable = tbody ? tbody :elTable; //增加兼容性
- var elRow = targetRow(elTable,ltTarget ); //默认是在内容中查找的
- //内容
- if( elRow ) {
- //设置高亮
- setCurrentRow(elTable, elRow, mouseParams.alt_state ,!isMouseDown,,mouseParams.button_state == 2/*_HL_PROP_MOUSE_BUTTON*/);
- elTable = (thead || tbody)?elTable.parent():elTable;
- elTable.updateWindow();
- }else {
- elRow = ltTarget;
- var classNam = ltTarget.class ? ..string.trim(ltTarget.class) ; //表头有sort class类,有才能触发排序
- select(classNam) {
- case "sort" {//排序
- onColumnClick(tbody,elRow);
- return mouseParams.button_state == 1/*_HL_MAIN_MOUSE_BUTTON*/;
-
- }
-
- }
- }
- }
- }
- onButtonClick = function (scTarget,scOwner,reason,behaviorParams) {
- var classNam = scTarget.class ? ..string.trim(scTarget.class) ;
- select(classNam) {
- case "checkall" {//表全选
- return checkAll(scOwner, scTarget.state.checked);
-
- }
- case "checkone" {//单选
- return checkone(scTarget, scTarget.state.checked);
-
- }
- }
-
- }
-
- var mygrid = self;
- namespace sinking {
- //鼠标以SINKING(捕获模式)向下传递下,使用sinking名字空间响应事件
- onMouseDown = function (ltTarget,ltOwner,x,y,mouseParams) {
- return mygrid.onMouseDblClick(ltTarget,ltOwner, x,y,mouseParams,true)
- }
- }
- //注册键盘事件
- onKeyDown = function (ltTarget,ltOwner,keyCode, altState, keyParams) {
- var ltOwner = ltOwner.$1("tbody"):ltOwner; //取主内容,增强兼容性
- select(keyCode) {
- case 0x28/*_VK_DOWN*/ {
- var c = getCurrentRow( ltOwner );
- var idx = c.index() + 1;
- if(ltOwner.childCount()<idx) idx =1;
- for(i,elRow in ltOwner.eachChild(idx) ){
- if( elRow.isVisible() ) {
- setCurrentRow(ltOwner, elRow, altState);
- return true;
- };
- }
-
- return true;
- };
- case 0x26/*_VK_UP*/{
- var c = getCurrentRow( ltOwner );
-
- //让表格到1行了自动到下面
- var idx =c.index()-1;
- if(idx< 1)idx = ltOwner.childCount();
- var fRows = fixedRows(ltOwner); //表头
- if(idx < fRows) return true;
- for(i,elRow in ltOwner.eachChild(idx,fRows) ){
- if( elRow.isVisible()) {
- setCurrentRow(ltOwner, elRow, altState);
- return true;
- };
- }
- };
- case 0x21/*_VK_PRIOR*/{
- var trc = ltOwner.getRect(1/*_HL_ROOT_RELATIVE*/ | 0x60/*_HL_SCROLLABLE_AREA*/);
- var y = trc.top - (trc.bottom - trc.top);
- var first = fixedRows(ltOwner);
- var r;
-
- for(i,nr in ltOwner.eachChild( ltOwner.childCount(),first) ){
- if( nr.style.display != "none" ){
-
- varpr = r;
- r = nr;
- if( r.getRect(1/*_HL_ROOT_RELATIVE*/ | 0x20/*_HL_BORDER_BOX*/).top < y ) {
- // row found
- if(pr) r = pr; // to last fully visible
- break;
- }
- }
- }
-
- setCurrentRow(ltOwner, r, altState, false, true);
- return true;
- };
- case 0x22/*_VK_NEXT*/{
- var trc = ltOwner.getRect( 1/*_HL_ROOT_RELATIVE*/ | 0x60/*_HL_SCROLLABLE_AREA*/);
- var y = trc.bottom + (trc.bottom - trc.top);
- var r;
-
- var fRows = fixedRows(ltOwner)
- for( i,nr in ltOwner.eachChild( fRows ) ){
- if( nr.style.display != "none" ) {
- varpr = r;
- r = nr;
- if( r.getRect( 1/*_HL_ROOT_RELATIVE*/ | 0x20/*_HL_BORDER_BOX*/).bottom > y ) {
- // row found
- if(pr) r = pr; // to last fully visible
- break;
- }
- }
- }
-
- setCurrentRow(ltOwner, r, altState, false, true);
- return true;
- };
- case 0x24/*_VK_HOME*/{
- var idx = fixedRows(ltOwner);
- if( idx == 1) idx = 2;
-
- for( i,eleRow in ltOwner.eachChild( idx ) ){
- if( eleRow.isVisible() ){
- setCurrentRow(ltOwner, eleRow, altState, false, true);
- return true;
- }
- }
- return true;
- };
- case 0x23/*_VK_END*/ {
- for( i,row in ltOwner.eachChild( ltOwner.childCount(),fixedRows(ltOwner) ) ){
- if( row.isVisible() ){
- setCurrentRow(ltOwner, row, altState, false, true);
- return true;
- }
- }
- return true;
- };
-
-
- case 'A'#{
- if( isMultiple(ltOwner) && (altState & 1/*_HL_CONTROL_KEY_PRESSED*/) != 0 ) {
- checkAll(ltOwner, true);
- ltOwner.postEvent( "onSelectSelectionChanged" );
- return true;
- }
- };
- }
- }
- }
-
- var wbSciter = web.sciter( winform.custom);//在窗体上创建HTMlayout对
- wbSciter.html = html;
- wbSciter.$1("h2").innerText = "wbSciter的表头排序"
- import win.ui.shadow;
- win.ui.shadow(winform); //添加阴影边框
- winform.show();
- win.loopMessage();
复制代码
|
|