grid view update

This commit is contained in:
lxsang 2020-04-03 13:49:12 +02:00
parent 60e50d2ceb
commit 5b21696fa1
7 changed files with 108 additions and 11 deletions

View File

@ -1,9 +1,25 @@
class GridCellPrototype extends Ant.OS.GUI.BaseTag class GridCellPrototype extends Ant.OS.GUI.BaseTag
constructor: (r, o) -> constructor: (r, o) ->
super r, o super r, o
@setopt "class", "afxgridcell" @setopt "class", "afx-grid-cell"
@setopt "oncellselect", (e) ->
@setopt "oncelldbclick", (e) ->
@setopt "data", {} @setopt "data", {}
mount: () ->
me = @
$(@root).css "display", "block"
$(@root).click (e) ->
me.cellseleck e, false
$(@root).dblclick (e) ->
me.cellseleck e, true
cellseleck: (e, flag) ->
e.item = @root
evt = { id: @aid(), data: e }
return @get("oncellselect") evt unless flag
@get("oncelldbclick") evt
__class__: (v) -> __class__: (v) ->
$(@root).removeClass().addClass @get("class") $(@root).removeClass().addClass @get("class")
@ -19,8 +35,6 @@ class SimpleGridCell extends GridCellPrototype
__data__: (d) -> __data__: (d) ->
@refs.cell.set k, v for k, v of d @refs.cell.set k, v for k, v of d
mount: () ->
$(@root).css "display", "block"
layout: () -> layout: () ->
[{ [{
el: "afx-label", ref: "cell" el: "afx-label", ref: "cell"
@ -32,8 +46,14 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
@setopt "header", [] @setopt "header", []
@setopt "headeritem", "afx-grid-cell" @setopt "headeritem", "afx-grid-cell"
@setopt "cellitem", "afx-grid-cell" @setopt "cellitem", "afx-grid-cell"
@setopt "cellclass", "afxgridcell" @setopt "selectedCell", undefined
@setopt "selectedRows", []
@setopt "selectedRow", undefined
@setopt "rows", [] @setopt "rows", []
@setopt "oncellselect", (e) ->
@setopt "onrowselect", (e) ->
@setopt "oncelldbclick", (e) ->
@setopt "multiselect", false
__header__: (v) -> __header__: (v) ->
return $(@refs.header).hide() if not v or v.length is 0 return $(@refs.header).hide() if not v or v.length is 0
@ -46,13 +66,63 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
@calibrate() @calibrate()
__rows__: (rows) -> __rows__: (rows) ->
me = @
$(@refs.grid).empty() $(@refs.grid).empty()
for row in rows for row in rows
div = $("<div>")
.addClass("afx-grid-row")
.css "display", "contents"
.appendTo @refs.grid
for cell in row for cell in row
el = $("<#{@get("cellitem")}>").appendTo @refs.grid el = $("<#{@get("cellitem")}>").appendTo div
el[0].uify undefined el[0].uify undefined
el[0].set "data", cell el[0].set "data", cell
cell.domel = el[0] cell.domel = el[0]
el[0].set "oncellselect", (e) -> me.cellselect e, false
el[0].set "oncelldbclick", (e) -> me.cellselect e, true
multiselect: () ->
@get "multiselect"
cellselect: (e, flag) ->
e.id = @aid()
selectedCell = @get "selectedCell"
# return if e.data.item is selectedCell and not flag
selectedCell.set "class", "afx-grid-cell" if selectedCell
@set "selectedCell", e.data.item
$(e.data.item).addClass "afx-grid-cell-selected"
if flag
@observable.trigger "celldbclick", e
@get("oncelldbclick") e
else
@observable.trigger "cellselect", e
@get("oncellselect") e
@rowselect e
rowselect: (e) ->
return unless e.data.item
selectedRow = @get "selectedRow"
selectedRows = @get "selectedRows"
evt = { id: @aid(), data: {} }
div = $(e.data.item).parent()[0]
if @multiselect()
if selectedRows.includes div
selectedRows.splice selectedRows.indexOf(div) , 1
$(div).removeClass()
else
selectedRows.push div
$(div).removeClass().addClass("afx-grid-row-selected")
evt.data.items = @get "selectedRows"
else
return if selectedRow is div
$(selectedRow).removeClass()
@set "selectedRow", div
@set "selectedRows", [div]
evt.data.item = div
evt.data.items = [ div ]
$(div).removeClass().addClass("afx-grid-row-selected")
@get("onrowselect") evt
@observable.trigger "rowselect", evt
has_header: () -> has_header: () ->
h = @get("header") h = @get("header")

View File

@ -158,6 +158,7 @@ class MenuTag extends Ant.OS.GUI.BaseTag
handleselect: (e) -> handleselect: (e) ->
$(@root).hide() if @isctxmenu() $(@root).hide() if @isctxmenu()
e.id = @aid()
@get("onmenuselect") e @get("onmenuselect") e
@observable.trigger "menuselect", e @observable.trigger "menuselect", e

View File

@ -12,9 +12,13 @@ class Ant.OS.GUI.BaseTag
@root.aid = () -> me.aid() @root.aid = () -> me.aid()
@refs = {} @refs = {}
@setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString() @setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString()
$(@root).attr "data-id", @get("data-id") #$(@root).attr "data-id", @get("data-id")
@children = [] @children = []
__: (k, v) ->
@set k, v if v
@get k
for obj in @layout() for obj in @layout()
dom = @mkui obj dom = @mkui obj
if dom if dom

View File

@ -2,7 +2,7 @@ coffee_files = coffees/main.coffee
jsfiles = jsfiles =
cssfiles = cssfiles = css/main.css
copyfiles = assets/scheme.html package.json copyfiles = assets/scheme.html package.json

View File

@ -35,7 +35,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
openwin: () -> openwin: () ->
me = @ me = @
scheme = $.parseHTML """ scheme = $.parseHTML """
<afx-app-window apptitle="Preview" width="650" height="500"> <afx-app-window data-id="example-show-case" apptitle="Preview" width="650" height="500">
<afx-vbox> <afx-vbox>
<afx-menu data-height="30" data-id="menu" /> <afx-menu data-height="30" data-id="menu" />
<afx-hbox> <afx-hbox>
@ -55,10 +55,10 @@ class ShowCase extends this.OS.GUI.BaseApplication
</afx-hbox> </afx-hbox>
<afx-resizer data-height="5" /> <afx-resizer data-height="5" />
<afx-hbox> <afx-hbox>
<afx-list-view data-id="list" dropdown="false" multiselect="false" /> <afx-list-view data-id="list" dropdown="false" multiselect="true" />
</afx-hbox> </afx-hbox>
<afx-hbox data-height="150"> <afx-hbox data-height="150">
<afx-grid-view data-id="grid" /> <afx-grid-view data-id="grid" multiselect="true" />
</afx-hbox> </afx-hbox>
</afx-vbox> </afx-vbox>
<afx-vbox data-width="150"> <afx-vbox data-width="150">
@ -122,6 +122,12 @@ class ShowCase extends this.OS.GUI.BaseApplication
ctmenu.show e ctmenu.show e
grid = $ "[data-id='grid']", scheme[0] grid = $ "[data-id='grid']", scheme[0]
grid[0].set "oncelldbclick", (e) ->
console.log "on dbclick", e
grid[0].set "onrowselect", (e) ->
console.log "on rowselect", e.data.items
me.subwin.observable.on "cellselect", (e) ->
console.log "observable", e
grid[0].set "header", [{ text: "header1", width: 80 }, { text: "header2" }, { text: "header3" }] grid[0].set "header", [{ text: "header1", width: 80 }, { text: "header2" }, { text: "header3" }]
grid[0].set "rows", [ grid[0].set "rows", [
[{ text: "text 1" }, { text: "text 2" }, { text: "text 3" }], [{ text: "text 1" }, { text: "text 2" }, { text: "text 3" }],

View File

@ -0,0 +1,14 @@
afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row:nth-child(even) .afx-grid-cell
{
background-color: #f5F5F5;
}
afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row-selected .afx-grid-cell
{
background-color: #116cd6;
color:white;
}
afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row-selected .afx-grid-cell-selected
{
font-weight: bold;
}

View File

@ -25,3 +25,5 @@ copy:
cp -rf $(copyfiles) build/ cp -rf $(copyfiles) build/
clean: clean:
- rm -rf build/* - rm -rf build/*
.PHONY: all main clean copy css js cofee