A. 濡备綍鍦╰hinkphp涓浣跨敤b-jui
B-JUI 鍓岖妗嗘灦
B-JUI锛圔ootstrap for DWZ锛夋槸涓涓瀵屽㈡埛绔妗嗘灦锛屽熀浜嶥WZ-jUI瀵屽㈡埛绔妗嗘灦淇鏀广
链鏂囨槸B-JUI涓鏂囦娇鐢ㄦ坠鍐岋纴鍖呮嫭浣跨敤绀轰緥浠ｇ爜锛屾劅鍏磋叮镄勫悓瀛﹀弬钥冧笅銆
姒傝
B-JUI浠呮湁涓涓涓婚〉闱(document)锛屾嗘灦鍐呯殑镓链夊瓙椤甸溃灏嗛氲繃Ajax銮峰彇钖庝綔涓轰竴涓椤甸溃鐗囨甸梼锷犲埌涓婚〉闱涓婏纴澶栭儴椤甸溃鍒欓氲繃iframe宓屽叆涓婚〉闱锛 链鑺备粙缁 B-JUI镄勪富椤甸溃缁撴瀯銆
HTML5 鏂囨。绫诲瀷
钖孊ootstrap锛 B-JUI浣跨敤 HTML5 鏂囨。绫诲瀷锛屽弬镦т笅闱㈢殑镙煎纺杩涜岃剧疆銆
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
涓婚〉闱㈢粨鏋(浠卋ody閮ㄥ垎)
涓婚〉闱㈢敱涓婏纸椤靛ご锛夈佷腑宸︼纸瀵艰埅凿滃崟锛夈佷腑鍙筹纸宸ヤ綔鍖猴级銆佷笅锛堥〉鑴氾级锲涢儴鍒嗙粍鎴愶纴鍏朵腑宸︿晶瀵艰埅凿滃崟鍙鏀剁缉銆傜粨鏋勫备笅锛
<header class="bjui-header" id="bjui-header">
<!-- 椤靛ご -->
</header>
<div class="bjui-leftside" id="bjui-leftside">
<!-- 瀵艰埅凿滃崟 -->
</div>
<div id="bjui-container">
<!-- 宸ヤ綔鍖 -->
</div>
<footer class="bjui-footer" id="bjui-footer">
<!-- 椤佃剼 -->
</footer>
瀛愰〉闱锛埚嵆椤甸溃鐗囨砾钖庨溃绠绉帮细椤电墖]锛夌粨鏋
椤电墖阃氩父鐢变袱閮ㄥ垎缁勬垚锛屼篃鍙浠ュ彧淇濈暀bjui-pageContent閮ㄥ垎锛屽叾涓璪jui-pageContent閮ㄥ垎鍙阃塨jui-headBar锛堥《閮ㄥ伐鍏锋浔锛夊拰bjui-footBar锛埚簳閮ㄥ伐鍏锋浔锛夈傜粨鏋勫备笅锛
<div class="bjui-pageHeader">
<!-- 椤堕儴妯″潡[濡傦细锷熻兘鎸夐挳銆佹悳绱㈤溃𨱒縘 -->
</div>
<div class="bjui-pageContent">
<div class="bjui-headBar">
<!-- 椤堕儴宸ュ叿𨱒 -->
</div>
<div data-layout-h="0">
<!-- 鍐呭瑰尯 -->
</div>
<div class="bjui-footBar">
<!-- 搴曢儴宸ュ叿𨱒 -->
</div>
</div>
data-layout-h 灞炴ц〃绀鸿ュ瑰櫒涓洪〉鐗囱嚜阃傚簲甯冨眬锛屽綋鍊间负0镞讹纴B-JUI浼氢负璇ュ瑰櫒镄勯珮搴﹁嚜锷ㄨ祴鍊间负锛氭湰椤电墖镐婚珮搴﹀噺铡绘湰椤电墖涓镄勫浐瀹氩厓绱(bjui-pageHeader\bjui-headBar\bjui-footBar)楂桦害銆
data-layout-h 灞炴у间笉绛変簬0镞讹纴璇ュ瑰櫒楂桦害涓烘湰椤电墖镐婚珮搴﹀噺铡诲睘镐у笺
闇瑕佽嚜瀹氢箟锲哄畾鍏幂礌(鍧楃骇鍏幂礌链夋晥)锛岃蜂负璇ュ厓绱犳坊锷犲睘镐data-layout-fixed="true"
瀹屾暣镄勯〉鐗囱﹁丅-JUI婧愪唬镰佺殑table.html锛屼粎bjui-pageContent閮ㄥ垎镄勯〉鐗囱﹁乫orm.html
鍏幂礌ID锻藉悕瑙勮寖
锲犱负链妗嗘灦榛樿ゆ墍链夊唴瀹归兘浣崭簬涓涓狣ocument涓锛屾墍浠ヤ负鍏幂礌锻藉悕ID镄勬椂鍊欓渶瑕佸仛鍒板敮涓镐э纴濡傛灉纭瀹炰笉鍙阆垮厤镄勪细鍑虹幇链夐吨澶岻D镄勭幇璞★纴闇瑕佹搷浣滃綋鍓嶉〉鐗囩殑鍏幂礌镞讹纴灏介噺鐢锛
$.CurrentNavtab.find('#dom-id')锛屽湪褰揿墠镙囩惧伐浣滃尯涓镆ユ垒鎸囧畾ID镄勫厓绱犮
鎴 $.CurrentDialog.find('#dom-id')锛屽湪褰揿墠寮圭獥涓镆ユ垒鎸囧畾ID镄勫厓绱犮
镙囩惧纺宸ヤ綔鍖(navtab)
B-JUI妗嗘灦镄勬暣涓宸ヤ綔鍖洪儴鍒嗗氨鏄涓涓猲avtab缁勪欢锛屾湰缁勪欢浣崭簬涓婚〉闱㈢殑"#bjui-container"瀹瑰櫒鍐咃纴锲哄畾镄删tml缁撴瀯濡备笅锛
<div id="bjui-navtab" class="tabsPage">
<div class="tabsPageHeader">
<div class="tabsPageHeaderContent">
<ul class="navtab-tab nav nav-tabs">
<li data-tabid="main" class="main active"><a href="javascript:;"><span>鎴戠殑涓婚〉</span></a></li>
</ul>
</div>
<div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>
<div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>
<div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>
</div>
<ul class="tabsMoreList">
<li><a href="javascript:;">鎴戠殑涓婚〉</a></li>
</ul>
<div class="navtab-panel tabsPageContent layoutBox">
钖勯〉鐗囧唴瀹瑰尯锘
</div>
</div>
鐢ㄦ硶(濡备綍鍒涘缓涓涓猲avtab)锛
DOM镣瑰嚮瑙﹀彂锛
<a href="mytab.html" data-toggle="navtab" data-id="mynavtab" data-title="鎴戠殑涓氩姟椤甸溃">镓揿紑navtab</a>
<button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-url="mytab.html" data-title="鎴戠殑涓氩姟椤甸溃">镓揿紑navtab</button>
jQuery锛
$(selector).navtab({id:'镙囩剧殑id', url:'杞藉叆椤电墖镄剈rl', title:'镙囩剧殑镙囬'})
鍙栧缑褰揿墠navtab镄勫唴瀹瑰瑰櫒锛$.CurrentNavtab
鍙傛暟锛
钖岖О 绫诲瀷 榛樿ゅ 鎻忚堪 id string navtab 镙囩剧殑ID锛屽傛灉鎸囧畾閲嶅嶏纴灏呜嗙洊鐜版湁镄処D鐩稿悓镙囩俱 title string New tab 镙囩炬墦寮钖庢樉绀虹殑钖岖О銆 url string undefined 璇锋眰鏁版嵁镄剈rl銆 type string GET Http璇锋眰鏂瑰纺锛屽彲阃夆楪ET/POST钬欍 data object {} 璇锋眰url镞讹纴闇瑕佸彂阃佺殑data鏁版嵁銆
鏂规硶锛
杩欐牱璋幂敤navtab镄勬柟娉曪细
$(selector).navtab('鏂规硶钖', 鍙傛暟1, ..., 鍙傛暟n)
濡傝佸垏鎹㈠埌镆愪釜镙囩撅细
$(selector).navtab('switchTab', 镙囩绸D)
鏂规嫭鍙风殑鍙傛暟锛岃〃绀鸿ュ弬鏁板彲阃夈
鍙鐢ㄧ殑鏂规硶锛
switchTab(tabid)锛氩垏鎹㈠埌镆愪釜镙囩俱
refresh(tabid)锛氩埛鏂版煇涓镙囩俱
reload(options)锛氶吨鏂拌浇鍏ユ煇涓镙囩撅纴options钖宯avtab榛樿ゅ弬鏁帮纴濡傛灉链鎸囧畾ID锛屽垯榛樿ら吨杞藉叆褰揿墠镙囩俱
closeTab(tabid)锛氩叧闂镆愪釜镙囩俱
closeCurrentTab([tabid])锛氩叧闂褰揿墠镙囩俱
closeAllTab()锛氩叧闂镓链夋爣绛俱
浜嬩欢锛
杩欐牱鐩戝惉navtab镄勪簨浠讹细
$(document).on('bjui.beforeLoadNavtab', function(e) {
var $navtab = $(e.target)
// do something...
})
钖岖О 鎻忚堪 bjui.beforeLoadNavtab 杞藉叆镙囩惧唴瀹瑰墠镄勪簨浠 bjui.beforeCloseNavtab 鍏抽棴镙囩惧墠镄勪簨浠
寮瑰嚭绐楀彛(dialog)
寮瑰嚭绐楀彛鍒嗕负鏅阃氩脊鍑虹獥鍙ｅ拰妯℃佸脊鍑虹獥鍙ｏ纴鏅阃氩脊鍑虹獥鍙ｅ彲阃氲繃taskBar缁勪欢杩涜屾渶灏忓寲绛夋搷浣溿傚脊鍑虹獥鍙ｇ殑DOM缁撴瀯浼氭斁鍏Body涓锛岀粨鏋勫备笅锛
<div class="bjui-dialog bjui-dialog-container">
<div class="dialogHeader">
<!-- 链澶у寲銆佹渶灏忓寲銆佸叧闂绛夋寜阍鍖 -->
<h1><!-- 镙囬 --></h1>
</div>
<div class="dialogContent layoutBox unitBox">
<!-- 椤电墖鍐呭瑰尯 -->
</div>
<!-- 鐢ㄤ簬璋冩暣澶у皬镄刣iv鐗囨柇 -->
</div>
鐢ㄦ硶(濡备綍鍒涘缓涓涓猟ialog)锛
DOM镣瑰嚮瑙﹀彂锛
<a href="mydialog.html" data-toggle="dialog" data-id="mydialog" data-title="鎴戠殑寮瑰嚭绐楀彛">镓揿紑寮瑰嚭绐楀彛</a>
<button type="button" class="btn-green" data-toggle="dialog" data-id="mynavtab" data-url="mytab.html" data-title="鎴戠殑寮瑰嚭绐楀彛">镓揿紑寮瑰嚭绐楀彛</button>
jQuery锛
$(selector).dialog({id:'寮圭獥镄刬d', url:'杞藉叆椤电墖镄剈rl', title:'寮圭獥镄勬爣棰'})
鍙栧缑褰揿墠dialog锛$.CurrentDialog
鍙傛暟锛
钖岖О 绫诲瀷 榛樿ゅ 鎻忚堪 id string navtab 寮圭獥镄処D锛屽傛灉鎸囧畾閲嶅嶏纴灏呜嗙洊鐜版湁镄処D鐩稿悓寮圭獥銆 title string New tab 寮圭獥镓揿紑钖庢樉绀虹殑钖岖О銆 url string undefined 璇锋眰鏁版嵁镄剈rl銆 type string GET Http璇锋眰鏂瑰纺锛屽彲阃夆楪ET/POST钬欍 data object {} 璇锋眰url镞讹纴闇瑕佸彂阃佺殑data鏁版嵁銆 width int 500 寮圭獥镄勫藉害銆 height int 300 寮圭獥镄勯珮搴︺ max boolean false 镓揿紑寮圭獥镞剁洿鎺ユ渶澶у寲銆 mask boolean false 鏄钖︽ā镐佺獥鍙ｃ resizable boolean true 鍙浠ヨ皟鏁村脊绐楃殑澶у皬銆 drawable boolean true 鍙浠ユ嫋锷ㄥ脊绐椼 maxable boolean true 鏄钖︽樉绀烘渶澶у寲鎸夐挳銆 minable boolean true 鏄钖︽樉绀烘渶灏忓寲鎸夐挳锛堟ā镐佸脊绐楁棤鏁堬级銆
鏂规硶锛
璋幂敤鏂瑰纺钖宯avtab锛 濡傝佸叧闂镆愪釜寮圭獥锛
$(selector).dialog('close', 寮圭獥ID)
鏂规嫭鍙风殑鍙傛暟锛岃〃绀鸿ュ弬鏁板彲阃夈
鍙鐢ㄧ殑鏂规硶锛
switchDialog(id)锛氩垏鎹㈠埌镆愪釜寮圭獥(妯℃佸脊绐楁棤鏁)銆
refresh(id)锛氩埛鏂版煇涓寮圭獥銆
reload(options)锛氶吨鏂拌浇鍏ユ煇涓寮圭獥锛宱ptions钖宒ialog榛樿ゅ弬鏁帮纴濡傛灉链鎸囧畾ID锛屽垯榛樿ら吨杞藉叆褰揿墠寮圭獥銆
close(id)锛氩叧闂镆愪釜寮圭獥銆
closeCurrent()锛氩叧闂褰揿墠寮圭獥銆
浜嬩欢锛
杩欐牱鐩戝惉dialog镄勪簨浠讹细
$(document).on('bjui.beforeLoadDialog', function(e) {
var $dialog = $(e.target)
// do something...
})
钖岖О 鎻忚堪 bjui.beforeLoadDialog 杞藉叆寮圭獥鍐呭瑰墠镄勪簨浠 bjui.beforeCloseDialog 鍏抽棴寮圭獥鍓岖殑浜嬩欢
Ajax
链鑺备富瑕佷粙缁岯-JUI妗嗘灦涓镄𪞝jax镎崭綔锛屽洖璋冨嚱鏁扮瓑銆
Ajax镎崭綔锛
ajax鎼灭储 - 涓昏佺敤浜庢悳绱㈣〃鍗曪纴鍒嗛〉琛ㄥ崟锛屼緥锛欱-JUI婧愮爜"table.html"涓镄#pagerForm锛
<form id="pagerForm" data-toggle="ajaxsearch" action="table.html" method="post">
ajax閲岖疆鎼灭储 - 涓昏佺敤浜庨吨缃鎼灭储琛ㄥ崟锛宒ata-clear-query灞炴у憡璇塮orm鏄钖︽竻绌烘煡璇㈠弬鏁帮纴浠呬缭鐣椤垎椤靛强瀛楁垫帓搴忎俊鎭锛屼緥锛欱-JUI婧愮爜"table.html"涓镄勬竻绌烘煡璇㈡寜阍锛
<a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">娓呯┖镆ヨ</a>
ajax杞藉叆 - 涓昏佺敤浜庝负鎸囧畾瀹瑰櫒杞藉叆url镄勫唴瀹癸纴data-target灞炴у间负阃夋嫨鍣ㄨ〃杈惧纺锛屽憡璇塧jax杞藉叆镄勫唴瀹规斁鍒拌ュ瑰櫒锛岄傚悎鐢ㄦ潵锅氩眬閮ㄥ埛鏂帮细
<a href="table-edit.html" data-toggle="ajaxload" data-target="#D11">锷犺浇鍐呭</a>
ajax锷ㄤ綔 - 涓昏佺敤浜庢墽琛宎jax锻戒护锛屽傗滃垹闄も濓纴data-confirm-msg灞炴х敤浜庡湪镎崭綔鍓嶈繘琛岀‘璁ゆ彁绀猴细
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="纭瀹氲佸垹闄よヨ屼俊鎭钖楋纻">鍒犻櫎鏁版嵁</a>
ajax瀵煎嚭 - 涓昏佺敤浜庡煎嚭淇℃伅(涓嬭浇鏂囦欢)锛宒ata-confirm-msg灞炴х敤浜庡湪镎崭綔鍓嶈繘琛岀‘璁ゆ彁绀猴细
<a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="纭瀹氲佸煎嚭淇℃伅钖楋纻">瀵煎嚭鍏ㄩ儴</a>
ajax瀵煎嚭阃変腑椤 - 涓昏佺敤浜庡煎嚭阃変腑椤逛俊鎭(涓嬭浇鏂囦欢)锛宒ata-confirm-msg灞炴х敤浜庡湪镎崭綔鍓嶈繘琛岀‘璁ゆ彁绀猴纴data-idname灞炴ф寚瀹氩彂阃佸埌钖庡彴镄勫瓧娈靛悕绉帮纴榛樿も渋ds钬濓纴data-group灞炴х敤浜庢寚瀹氩嶉夋嗙殑name锛
<a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="纭瀹氲佸煎嚭阃変腑椤瑰悧锛" data-idname="expids" data-group="ids">瀵煎嚭阃変腑椤</a>
ajax鍒犻櫎阃変腑椤 - 涓昏佺敤浜庡煎嚭阃変腑椤逛俊鎭(涓嬭浇鏂囦欢)锛宒ata-confirm-msg灞炴х敤浜庡湪镎崭綔鍓嶈繘琛岀‘璁ゆ彁绀猴纴data-idname灞炴ф寚瀹氩彂阃佸埌钖庡彴镄勫瓧娈靛悕绉帮纴榛樿も渋ds钬濓纴data-group灞炴х敤浜庢寚瀹氩嶉夋嗙殑name锛
<a href="del.html" data-toggle="dodelchecked" data-confirm-msg="纭瀹氲佸垹闄ら変腑椤瑰悧锛" data-idname="delids" data-group="ids">瀵煎嚭阃変腑椤</a>
Ajax锲炶皟锛
ajaxsearch銆乨oajax銆乨odelchecked涓夌峚jax镎崭綔鏀鎸佽嚜瀹氢箟ajax锲炶皟鍑芥暟锛岃嚜瀹氢箟镄勫洖璋冨嚱鏁版斁鍒癫ata-callback灞炴э纴鍐欐硶濡备笅锛氥
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="纭瀹氲佸垹闄よヨ屼俊鎭钖楋纻" data-callback="mycallback">鍒犻櫎鏁版嵁</a>
function mycallback(json) {
//do something...
}
链嶅姟绔杩斿洖镄凧SON鍙傛暟濡备笅锛
钖岖О 绫诲瀷 鎻忚堪 statusCode int 蹇呴夈傜姸镐佺爜(ok = 200, error = 300, timeout = 301)锛屽彲浠ュ湪BJUI.init镞堕厤缃涓変釜鍙傛暟镄勯粯璁ゅ笺 message string 鍙阃夈备俊鎭鍐呭广 tabid string 鍙阃夈傚緟鍒锋柊navtab id锛屽氢釜id浠ヨ嫳鏂囬楀彿鍒嗛殧寮锛屽綋鍓岖殑navtab id涓嶉渶瑕佸～鍐欙纴濉鍐椤悗鍙鑳戒细瀵艰嚧褰揿墠navtab閲嶅嶅埛鏂般 closeCurrent boolean 鍙阃夈傛槸钖﹀叧闂褰揿墠绐楀彛(navtab鎴杁ialog)銆 forward string 鍙阃夈傝烦杞鍒版煇涓猽rl銆 forwardConfirm string 鍙阃夈傝烦杞瑄rl鍓岖殑纭璁ゆ彁绀轰俊鎭銆
榛樿ょ殑锲炶皟鍑芥暟浼氭牴鎹褰揿墠瑙﹀彂鍏幂礌镄勪綅缃纭瀹氭槸鍒锋柊navtab杩樻槸dialog锛屾垨鏄灞閮╠iv瀹瑰櫒銆
鍙璋幂敤镄勮繑锲炰俊鎭鎻愮ず锛
$(selector).bjuiajax('ajaxDone', json)
琛ㄦ牸
琛ㄦ牸镄凛lass钖孊ootstrap锛屼粎璋冩暣浜唒adding鍊硷纴浣胯〃镙兼樉绀哄缑镟寸揣鍑戙
.table 灏戦噺镄刾adding鍜屾按骞冲垎闅旂嚎銆
.table-striped 𨱒＄汗鐘惰〃镙 [IE8 涓嶆敮鎸乚銆
.table-bordered 甯﹁竟妗呜〃镙笺
.table-hover 闄勫姞榧犳爣鎭锅沧晥鏋溿
琛ㄦ牸琛ㄥご瀛楁垫帓搴忔寜阍瀹炵幇锛
<th data-order-field="sex">濮揿悕</th>
<th data-order-direction="asc" data-order-field="createtime">鍒涘缓镞堕棿</th>
data-order-field=""灞炴т护链瀛楁靛彲鎺掑簭锛屽睘镐у间负涓庡悗鍙颁氦浜掔殑瀛楁靛悕绉般
data-order-direction灞炴ц〃绀烘湰瀛楁电殑褰揿墠鎺掑簭鐘舵侊纴鍙阃夊(asc/desc)
鏅阃氲〃镙
鏅阃氱殑琛ㄦ牸锛屽彲鏄剧ず鍒楄〃鐘舵浔鐩锛屾垨甯冨眬琛ㄥ崟锛岃〃澶村瓧娈靛彲闄勫姞鎺掑簭鎸夐挳銆
瀹屾暣镄勫疄渚嬭﹁丅-JUI婧愪唬镰佺殑table.html銆
锲哄畾琛ㄥご琛ㄦ牸
琛ㄦ牸镄勫ご鍙锲哄畾浣忥纴鍙璋冩暣钖勫垪镄勫藉害锛岃〃澶村瓧娈靛彲闄勫姞鎺掑簭鎸夐挳銆
<table data-toggle="tablefixed" data-width="100%" data-layout-h="0">
琛ㄦ牸娣诲姞灞炴data-toggle="tablefixed"钖庡氨浼氩浐瀹氲〃澶达纴B-JUI榛樿や负锲哄畾镄勮〃澶寸殑琛ㄦ牸娣诲姞Class锛歵able table-striped table-bordered table-hover锛屽傛灉璇table璁剧疆链塁lass锛屽垯浠ヨ剧疆镄勪负鍑
data-width灞炴у彲瀹氢箟锲哄畾琛ㄦ牸镄勫藉害锛岄粯璁や负"100%"锛屽彲璁剧疆澶т簬100%鎴栧浐瀹氩硷纴濡傦细150%鍜1200閮芥槸钖堟硶镄勶纴瓒呰繃navtab宸ヤ綔鍖虹殑瀹藉害镞朵细鍑虹幇妯钖戞粴锷ㄦ浔銆
瀹屾暣镄勫疄渚嬭﹁丅-JUI婧愪唬镰佺殑table-fixed.html銆
鍙缂栬緫琛ㄦ牸
鐢ㄤ簬闇瑕佸姩镐佹坊锷犵亩鍗曡屽唴瀹圭殑鍦版柟銆
<table class="table table-bordered table-hover table-striped" data-toggle="tabledit" data-initnum="0" data-layout-h="0">
<thead>
<tr>
<th title="No."><input type="text" name="edit[#index#].id" class="no" data-rule="required" value="1" size="2"></th>
<th title="濮揿悕"><input type="text" name="edit[#index#].name" data-rule="required" value="" size="5"></th>
<th title="" data-addtool="true" width="100">
<a href="javascript:;" class="btn btn-red row-del" data-confirm-msg="纭瀹氲佸垹闄よヨ屼俊鎭钖楋纻">鍒</a>
</th>
</tr>
</thead>
</table>
瀹炵幇姝ラわ细
琛ㄦ牸娣诲姞灞炴data-toggle="tablefixed"锛
thead涓娣诲姞涓婂瑰簲镄勮〃鍗曚俊鎭锛屽瓧娈靛悕鏀惧埌title灞炴т笂锛
鑻ユ兂鍦ㄦ煇鍒椾笂鏄剧ず娣诲姞鎸夐挳锛岄渶鍦ㄥ瑰簲鍒椾笂娣诲姞灞炴data-addtool="true"锛
鑻ユ疮琛屾樉绀哄垹闄ゆ寜阍锛岄渶涓哄垹闄ゆ寜阍娣诲姞Classrow-del锛屽傛灉瑕佺‘璁ゆ墠鑳藉垹闄わ纴闇涓哄垹闄ゆ寜阍娣诲姞灞炴data-confirm-msg="鍒犻櫎鎻愮ず淇℃伅"銆
琛ㄦ牸镄刣ata-initnum灞炴э纴琛ㄧず杞藉叆链椤电墖镞讹纴鍒濆嫔寲镄勬坊锷犺屾暟锛屽间负0镞朵笉闇鍐欍
澶栭儴瑙﹀彂娣诲姞琛屼簨浠讹细
鎸夐挳寮忥细
<button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1">娣诲姞缂栬緫琛</button>
data-target灞炴ц剧疆缂栬緫琛ㄦ牸镄刯Query阃夋嫨鍣锛宒ata-num灞炴ц剧疆镣瑰嚮镞舵坊锷犵殑琛屾暟銆
jQuery锛$(selector).tabledit('add', 缂栬緫琛ㄦ牸镄刯Query瀵硅薄, 寰呮坊锷犵殑琛屾暟)
$(selector).tabledit('add', $('#tabledit1'), 2)
瀹屾暣镄勫疄渚嬭﹁丅-JUI婧愪唬镰佺殑table-edit.html銆
B. 如何制作手机自适应网页
工具/原料
sublime
text
1打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
2向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta
name="viewport"
content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta
name="apple-mobile-web-app-capable"
content="yes">
<meta
name="apple-mobile-web-app-status-bar-style"
content="black">
<meta
name="format-detection"
content="telephone=no">
3将以上标签加入之后保存，再用手机打开即是自适应网页了。