mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-27 01:38:21 +01:00
grid view update
This commit is contained in:
lxsang
parent
60e50d2ceb
commit
5b21696fa1
@ -1,9 +1,25 @@
|
||||
class GridCellPrototype extends Ant.OS.GUI.BaseTag
|
||||
constructor: (r, o) ->
|
||||
super r, o
|
||||
@setopt "class", "afxgridcell"
|
||||
@setopt "class", "afx-grid-cell"
|
||||
@setopt "oncellselect", (e) ->
|
||||
@setopt "oncelldbclick", (e) ->
|
||||
@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) ->
|
||||
$(@root).removeClass().addClass @get("class")
|
||||
@ -19,8 +35,6 @@ class SimpleGridCell extends GridCellPrototype
|
||||
__data__: (d) ->
|
||||
@refs.cell.set k, v for k, v of d
|
||||
|
||||
mount: () ->
|
||||
$(@root).css "display", "block"
|
||||
layout: () ->
|
||||
[{
|
||||
el: "afx-label", ref: "cell"
|
||||
@ -32,8 +46,14 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
|
||||
@setopt "header", []
|
||||
@setopt "headeritem", "afx-grid-cell"
|
||||
@setopt "cellitem", "afx-grid-cell"
|
||||
@setopt "cellclass", "afxgridcell"
|
||||
@setopt "selectedCell", undefined
|
||||
@setopt "selectedRows", []
|
||||
@setopt "selectedRow", undefined
|
||||
@setopt "rows", []
|
||||
@setopt "oncellselect", (e) ->
|
||||
@setopt "onrowselect", (e) ->
|
||||
@setopt "oncelldbclick", (e) ->
|
||||
@setopt "multiselect", false
|
||||
|
||||
__header__: (v) ->
|
||||
return $(@refs.header).hide() if not v or v.length is 0
|
||||
@ -46,13 +66,63 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
|
||||
@calibrate()
|
||||
|
||||
__rows__: (rows) ->
|
||||
me = @
|
||||
$(@refs.grid).empty()
|
||||
for row in rows
|
||||
div = $("<div>")
|
||||
.addClass("afx-grid-row")
|
||||
.css "display", "contents"
|
||||
.appendTo @refs.grid
|
||||
for cell in row
|
||||
el = $("<#{@get("cellitem")}>").appendTo @refs.grid
|
||||
el = $("<#{@get("cellitem")}>").appendTo div
|
||||
el[0].uify undefined
|
||||
el[0].set "data", cell
|
||||
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: () ->
|
||||
h = @get("header")
|
||||
|
||||
@ -158,6 +158,7 @@ class MenuTag extends Ant.OS.GUI.BaseTag
|
||||
|
||||
handleselect: (e) ->
|
||||
$(@root).hide() if @isctxmenu()
|
||||
e.id = @aid()
|
||||
@get("onmenuselect") e
|
||||
@observable.trigger "menuselect", e
|
||||
|
||||
|
||||
@ -12,9 +12,13 @@ class Ant.OS.GUI.BaseTag
|
||||
@root.aid = () -> me.aid()
|
||||
@refs = {}
|
||||
@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 = []
|
||||
|
||||
__: (k, v) ->
|
||||
@set k, v if v
|
||||
@get k
|
||||
|
||||
for obj in @layout()
|
||||
dom = @mkui obj
|
||||
if dom
|
||||
|
||||
@ -2,7 +2,7 @@ coffee_files = coffees/main.coffee
|
||||
|
||||
jsfiles =
|
||||
|
||||
cssfiles =
|
||||
cssfiles = css/main.css
|
||||
|
||||
copyfiles = assets/scheme.html package.json
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
|
||||
openwin: () ->
|
||||
me = @
|
||||
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-menu data-height="30" data-id="menu" />
|
||||
<afx-hbox>
|
||||
@ -55,10 +55,10 @@ class ShowCase extends this.OS.GUI.BaseApplication
|
||||
</afx-hbox>
|
||||
<afx-resizer data-height="5" />
|
||||
<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 data-height="150">
|
||||
<afx-grid-view data-id="grid" />
|
||||
<afx-grid-view data-id="grid" multiselect="true" />
|
||||
</afx-hbox>
|
||||
</afx-vbox>
|
||||
<afx-vbox data-width="150">
|
||||
@ -122,6 +122,12 @@ class ShowCase extends this.OS.GUI.BaseApplication
|
||||
ctmenu.show e
|
||||
|
||||
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 "rows", [
|
||||
[{ text: "text 1" }, { text: "text 2" }, { text: "text 3" }],
|
||||
|
||||
14
src/packages/ShowCase/css/main.css
Normal file
14
src/packages/ShowCase/css/main.css
Normal 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;
|
||||
}
|
||||
@ -25,3 +25,5 @@ copy:
|
||||
cp -rf $(copyfiles) build/
|
||||
clean:
|
||||
- rm -rf build/*
|
||||
|
||||
.PHONY: all main clean copy css js cofee
|
||||
Loading…
Reference in New Issue
Block a user