HandsonTableでセルに色やアイコンを
HandsonTableのセルに色を付け、アイコンを付けてみます
http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/からアイコンを用意します
/Src/App.css
.ui-icon-tag-w:after { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M125%20125q0-14.788-10.463-25.251t-25.251-10.463-25.251%2010.463-10.463%2025.251%2010.463%2025.251%2025.251%2010.463%2025.251-10.463%2010.463-25.251zM422.712%20285.714q0%2014.788-10.324%2025.112l-136.998%20137.277q-10.882%2010.324-25.391%2010.324-14.788%200-25.112-10.324l-199.498-199.777q-10.603-10.324-17.997-28.181t-7.394-32.645v-116.071q0-14.509%2010.603-25.112t25.112-10.603h116.071q14.788%200%2032.645%207.394t28.46%2017.997l199.498%20199.219q10.324%2010.882%2010.324%2025.391z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E'); background-size: 20px; border-radius: 0; } .ui-icon-tag-b:after { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M125%20125q0-14.788-10.463-25.251t-25.251-10.463-25.251%2010.463-10.463%2025.251%2010.463%2025.251%2025.251%2010.463%2025.251-10.463%2010.463-25.251zM422.712%20285.714q0%2014.788-10.324%2025.112l-136.998%20137.277q-10.882%2010.324-25.391%2010.324-14.788%200-25.112-10.324l-199.498-199.777q-10.603-10.324-17.997-28.181t-7.394-32.645v-116.071q0-14.509%2010.603-25.112t25.112-10.603h116.071q14.788%200%2032.645%207.394t28.46%2017.997l199.498%20199.219q10.324%2010.882%2010.324%2025.391z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E'); background-size: 20px; border-radius: 0; }
セル内の変更はカラム設定のrendererに任意のFunctionを割り当てることで実現します
/Src/table.ts
function getColumns(): Object[] { return [ .... , { type: "text" , title: "状態" , data: "data_state" , readOnly: true , colWidths: 100 , renderer: htmlRenderer } .... ]; } .... /* * HTMLセル描画 */ function htmlRenderer(instance: any, td: HTMLTableDataCellElement, row: number, col: number, prop: string, value: any, cellProperties: any) { if (!_ht || _ht.countRows() <= row) { return; } switch (prop) { case "data_state": { let icon = "none"; let dt = <App.TableData>_ht.getSourceDataAtRow(row); // 直接データ取り出し if (dt.data_state_cd % 5 === 0) { $(td).css({ "color": "white" , "background-color": "red" }); icon = "tag"; } $(td).empty().append("<div class='ui-icon ui-icon-" + icon + "-w'>" + value + "</div>"); // $(td).text(value); } break; } }
設定した列のセルが描画される前のコールバックです
バインドされたデータを取得して、tdを弄ります
基本的にただのHTMLなのでどのようにでもなります
ちなみにpropがバインドされたメンバ名になります
サラッと出来上がり
