dojo自定义表格组件
生活随笔
收集整理的這篇文章主要介紹了
dojo自定义表格组件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
table.js組件定義
define(["dijit/registry", "dojo/_base/array", "dojo/dom",'dojo/_base/kernel', 'dojo/_base/loader'],function(registry,array, dom,dojo){/*** 創(chuàng)建表格組件* items 協(xié)議標(biāo)準(zhǔn)* {* _header:"標(biāo)題一", //表格標(biāo)題* _align:"right", //排列方式 目前排列方式 居中center,居右right* _name:"xxx", //字段名稱* _sticking:"xxxx", //粘貼 替換表格數(shù)據(jù)中原有的值* _colspan:"2" //將列分割 可與 _sticking屬性連用 <xx>xxx<xx>|<xxx>xxx<xxx> 可分為多個(gè)* }*/dojo.declare("util.table",null,{applyTo:null,//綁定的idurl:null,//請(qǐng)求地址items:null,//元素集合constructor:function(args){ //構(gòu)造函數(shù)dojo.safeMixin(this, args);//此處將上面得到的方法（及屬性）與要聲明類本身所擁有的方法（及屬性）進(jìn)行合并 },init:function(){var tableHtml = '<table width="100%" border="0" cellspacing="0" cellpadding="2" class="tab01">';var tableHeader = '<tr bgcolor="#0a486b">';var arrItems = new Array();//將每個(gè)items放入數(shù)組中var _items = this.items;var datas = loadJson(this.url);//獲取后臺(tái)json數(shù)據(jù)//headerarray.forEach(_items,function(item,space){if(space == _items.length-1){tableHeader += '<th class="none" ';}else{tableHeader += '<th ';}if(typeof(item._colspan) != 'undefined' && parseInt(item._colspan) >= 2){tableHeader += ' colspan="2" ';}tableHeader += ' >'+item._header+'</th>';arrItems.push(item);});tableHeader +='</tr>';//bodyvar tableTr = '';array.forEach(datas,function(_data,x){//集合中的每行元素if( x%2 == 0){tableTr += '<tr bgcolor="#0a486b" ';}else{tableTr += '<tr bgcolor="#085987" ';}var tableTd = '';//根據(jù)items中的條件進(jìn)行表格元素的判斷array.forEach(arrItems,function(_item,n){if(typeof(_item._colspan) != 'undefined' && parseInt(_item._colspan) >= 2){if(typeof(_item._sticking)=='undefined'){tableTd += '<td bgcolor="#f43d3d" >'+_data[_item._name]+'</td>';tableTd += '<td bgcolor="#36b7f0" >'+_data[_item._name]+'</td>';}else{var json = '{"sticking":'+ _item._sticking+'}'; //講function字符串變?yōu)閖son形式 用于轉(zhuǎn)換為對(duì)象var obj = eval("("+json+")");var _sticking = obj.sticking(_data[_item._name]);var __stickings = _sticking.split('|');for(var i=0;i<__stickings.length;i++){if(i%2 == 0){tableTd += '<td bgcolor="#36b7f0" ';}else{tableTd += '<td bgcolor="#f43d3d" ';}if(i == __stickings.length - 1){tableTd += ' class="none" >'+__stickings[i]+'</td> ';} else{tableTd += ' >'+__stickings[i]+'</td> ';}}}}else{if(_item._align == 'right'){//排列方式tableTd +='<td class="r" ';}else{tableTd +='<td '}if(_item._header == '操作'){tableTd += ' bgcolor="#36b7f0" ';}if(typeof(_item._sticking) != 'undefined'){//粘板var json = '{"sticking":'+ _item._sticking+'}'; //講function字符串變?yōu)閖son形式 用于轉(zhuǎn)換為對(duì)象var obj = eval("("+json+")");var _sticking = obj.sticking(_data[_item._name]);_data[_item._name] = _sticking;}if(n == data.length){tableTd += ' class="none" >'+ _data[_item._name] + '</td>';}else{tableTd += ' >'+ _data[_item._name] + '</td>';}}});//headerif(x == datas.length-1){tableTr += ' class="none">'+tableTd+'</tr>';}else{tableTr += ' >'+tableTd+'</tr>';}});tableHtml += tableHeader + tableTr + '</table>' ;arrItems.splice(0,arrItems.length);dojo.byId(this.applyTo).innerHTML = tableHtml;//console.log(tableHtml); }});//獲取后臺(tái)數(shù)據(jù)function loadJson(url){var data = null;dojo.xhrPost({url:url,handleAs: 'json',sync:true ,content:{act:'info'},load:function(response, ioArgs){if(response.result===0){data = response.datas;};},error:function(response, ioArgs){}});return data;}});?
調(diào)用組件
define(["dijit/registry","dojo/_base/array","dojo/dom","src/table","src/master"], function(registry,array,dom,master){return {init: function() {//操作operation =function(val){var text = '賣出';if(val == 3){text += 3;}return '<a href="#">'+text+'</a>|<a href="#">流水</a>';}var orderTabel = new util.table({applyTo:'_table',url:'server/test/hq.jsp',items:[{_header:"標(biāo)題一",_align:"right",_name:"name1"},{_header:"標(biāo)題二",_align:"center",_name:"name2"},{_header:"操作",_align:"center",_name:"name3",_sticking:operation,_colspan:"2"}]});orderTabel.init();}}; });?
html聲明
<html> <body> <!-- 容器 --> <div id="_table" data-dojo-type="dojox.mobile.ScrollableView"></div> <!-- 容器end --> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/hb-strive/p/3435145.html
總結(jié)
以上是生活随笔為你收集整理的dojo自定义表格组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VBA学习笔记（一）：自动添加代码VBA
- 下一篇： 如何更有效WEB应用防火墙确保信息安全