HTML5¼¼Êõ

JS×é¼þϵÁСª¡ª±í¸ñ×é¼þÉñÆ÷£ºbootstrap table - ÀÁµÃ°²·Ö

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£º²©¿ÍÔ° 2015-11-20 08:19 ÎÒÒªÆÀÂÛ( )

Ç°ÑÔ£ºÖ®Ç°Ò»Ö±ÔÚæן÷ÖÖʲôЧ¹û£¬Êâ²»Öª×î»ù´¡µÄBootstrap TableÓ÷¨¶¼Ã»ÓÐÉæ¼°£¬×ï¹ý£¬×ï¹ý¡£½ñÌì²¹ÆðÀ´°É¡£ÉÏÎ粩Ö÷ÓÉÁ㿪ʼ×Ô¼º´ÓÍ·µ½Î²Ê¹ÓÃÁËÒ»±éBootstrap Table £¬Óöµ½²»ÉÙʹÓ÷½ÃæµÄÎÊÌ⣬Ҳ×öÁËÒ»²¿·Ö±Ê¼Ç£¬ÔÚ´Ë·ÖÏí³öÀ´¹©ÐèҪʹÓõÄÔ°ÓѲο¼¡£»¹

Ç°ÑÔ£ºÖ®Ç°Ò»Ö±ÔÚæן÷ÖÖʲôЧ¹û£¬Êâ²»Öª×î»ù´¡µÄBootstrap TableÓ÷¨¶¼Ã»ÓÐÉæ¼°£¬×ï¹ý£¬×ï¹ý¡£½ñÌì²¹ÆðÀ´°É¡£ÉÏÎ粩Ö÷ÓÉÁ㿪ʼ×Ô¼º´ÓÍ·µ½Î²Ê¹ÓÃÁËÒ»±éBootstrap Table £¬Óöµ½²»ÉÙʹÓ÷½ÃæµÄÎÊÌ⣬Ҳ×öÁËÒ»²¿·Ö±Ê¼Ç£¬ÔÚ´Ë·ÖÏí³öÀ´¹©ÐèҪʹÓõÄÔ°ÓѲο¼¡£»¹¼ÇµÃÇ°Á½ÌìÓÐÔ°ÓѼÓȺÎÊÎÒBootstrap TableµÄʹÓÃÎÊÌ⣬ºÇºÇ£¬ÇÉÁË£¬½ñÌ첩Ö÷Ò²Óöµ½Í¬ÑùµÄÎÊÌâÁË£¬ÔÚ´Ë»¹ÊÇÒª±íʾ±§Ç¸£¬Ã»Óн«ÕâƪÌáÇ°·¢³öÀ´¡£

Ò»¡¢Ïà¹ØÎĵµºÍ¼¼ÊõÍøվС½á

 ¹ØÓÚÁ÷ʽ²¼¾ÖµÄbootstrap£¬²©Ö÷Ò²ÊÇ×î½ü°ëÄê²Å¿ªÊ¼Ê¹Óã¬ÓùýÖ®ºó²ÅÖªµÀÆäʵ¿ªÔ´µÄ¶«Î÷ͦ²»´íµÄ£¬»¹ÊÇΪbootstrap¿ªÔ´¹¤×÷ÕßµãÒ»¸ö´ó´óµÄÔÞ£¡ÀϹæ¾Ø£¬Ìù³öÏà¹ØÎĵµ£º

BootstrapÖÐÎÄÍø£º       

Bootstrap Table Demo£º

Bootstrap Table API£º

Bootstrap TableÔ´Â룺https://github.com/wenzhixin/bootstrap-table

Bootstrap DataPicker£º

BootstrapÀëÏßAPI

 Bootstrap Table ÀëÏßAPI

ÕâÀïҪ˵Ã÷Ò»µã£ºBootstrap TableµÄÀëÏßAPIÊDz©Ö÷×Ô¼ºÔÚ¹ÙÍøÉÏÃæ±£´æÏÂÀ´µÄ£¬Ñùʽ¿ÉÄÜ´æÔÚÎÊÌâ¡£²©Ö÷Ò²²»ÏëʹÓÃÕâÖÖ¿´ÆðÀ´¹Ô¹ÔµÄÀëÏßÎĵµ£¬µ«Ã»°ì·¨£¬ÕâÍøÕ¾¾­³£ÐԵĴò²»¿ª£¬Ã²ËÆÓб»Ç½µÄ¿ÉÄÜÐÔ¡£ÏÂÒ»²½ÊDz»ÊÇÒªFQÁË£¬O(∩_∩)O~¡£

¶þ¡¢Bootstrap TableµÄÒýÈë

 ¹ØÓÚBootstrap TableµÄÒýÈ룬һ°ãÀ´Ëµ»¹ÊÇÁ½ÖÖ·½·¨£º

1¡¢Ö±½ÓÏÂÔØÔ´Â룬Ìí¼Óµ½ÏîÄ¿ÀïÃæÀ´¡£

ÓÉÓÚBootstrap TableÊÇBootstrapµÄÒ»¸ö×é¼þ£¬ËùÒÔËüÊÇÒÀÀµBootstrapµÄ£¬ÎÒÃÇÊ×ÏÈÐèÒªÌí¼ÓBootstrapµÄÒýÓá£BootstrapµÄ°üÖ±½ÓÔÚ  ÀïÃæ¿ÉÒÔÕÒµ½£¬°æ±¾ÒѾ­³öÀ´4µÄÔ¤ÀÀ°æ£¬µ«»¹Êǽ¨ÒéʹÓñȽÏÎȶ¨µÄBootstrap3£¬Ä¿Ç°×îеÄ3.3.5¡£È»ºó¾ÍÊÇBootstrap TableµÄ°üÁË£¬ÓÉÓÚËüÊÇ¿ªÔ´µÄ£¬ÎÒÃÇÖ±½Ó½øµ½ËüµÄÔ´Âëhttps://github.com/wenzhixin/bootstrap-tableÀïÃægitÏÂÀ´¾ÍºÃÁË¡£È»ºó°ÑÕâÁ½¸ö°ü·Ö±ð¼ÓÈëµ½ÏîÄ¿ÖС£

2¡¢Ê¹ÓÃÎÒÃÇÉñÆæµÄNuget

´ò¿ªNuget£¬ËÑË÷ÕâÁ½¸ö°ü

BootstrapÒѾ­ÊÇ×îеÄ3.3.5ÁË£¬ÎÒÃÇÖ±½Ó°²×°¼´¿É¡£

¶øBootstrap TableµÄ°æ±¾¾¹È»ÊÇ0.4£¬ÕâҲ̫¿ÓµùÁË¡£ËùÒÔ²©Ö÷½¨ÒéBootstrap TableµÄ°ü¾ÍÖ±½ÓÔÚÔ´ÂëÀïÃæÈ¥ÏÂÔØ°É¡£Bootstrap Table×îеİ汾ºÃÏñÊÇ1.9.0¡£

Èý¡¢´úÂëÏê½â

 µ±È»£¬×é¼þÒýÓýøÀ´ÁË£¬Ê¹Óþͼòµ¥ÁË£¬Ö»²»¹ýÕâÀïÃæÉæ¼°ºÜ¶àϸ½ÚÐèÒªÎÒÃÇ´¦Àí£¬¾ßÌåÎÒÃÇ´ý»áÔÙ˵£¬ÏÈÀ´¿´¿´Ê¹Ó÷½·¨¡£

1¡¢ÔÚcshtmlÒ³ÃæÒýÓÃÏà¹Ø×é¼þ£¬²¢¶¨ÒåºÃÒ»¸ö¿ÕµÄ±í¸ñ¡£

@{ Layout = null; } BootStrap TableʹÓà @*1¡¢Jquery×é¼þÒýÓÃ*@ @*2¡¢bootstrap×é¼þÒýÓÃ*@ @*3¡¢bootstrap table×é¼þÒÔ¼°ÖÐÎÄ°üµÄÒýÓÃ*@ @*4¡¢Ò³ÃæJsÎļþµÄÒýÓÃ*@ ²éѯÌõ¼þ²¿ÃÅÃû³Æ״̬²éѯÐÂÔö ÐÞ¸Ä É¾³ý

ÒýÈëÐèÒªµÄÎļþÖ®ºó£¬ÎÒÃÇ×îÖØÒªµÄ¾ÍÊǶ¨ÒåÒ»¸ö¿ÕµÄtable£¬ÈçÉ쵀  <table></table>  ¡£µ±È»Bootstrap table»¹ÌṩÁËÒ»ÖÖ¼ò½éµÄÓ÷¨£¬Ö±½ÓÔÚtable±êÇ©ÀïÃ涨ÒåÀàËÆ“data-...”µÈÏà¹ØÊôÐÔ£¬¾Í²»ÓÃÔÙjsÀïÃæ×¢²áÁË£¬µ«²©Ö÷¾õµÃÕâÖÖÓ÷¨ËäÈ»¼òµ¥£¬µ«²»Ì«Áé»î£¬Óöµ½¸¸×Ó±íµÈÕâЩ¸ß¼¶Ó÷¨µÄʱºò¾Í²»Ì«ºÃ´¦ÀíÁË£¬ËùÒÔÔÛÃÇ»¹ÊÇͳһʹÓÃÔÚjsÀïÃæ³õʼ»¯µÄ·½Ê½À´Ê¹ÓÃtable×é¼þ¡£

2¡¢Js³õʼ»¯

$(function () { oTable = new TableInit(); oTable.Init(); oButtonInit = new ButtonInit(); oButtonInit.Init(); }); var TableInit = function () { var oTableInit = new Object(); //³õʼ»¯Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/Home/GetDepartment', //ÇëÇóºǫ́µÄURL£¨*£© method: 'get', //ÇëÇó·½Ê½£¨*£© toolbar: '#toolbar', //¹¤¾ß°´Å¥ÓÃÄĸöÈÝÆ÷ striped: true, //ÊÇ·ñÏÔʾÐмä¸ôÉ« cache: false, //ÊÇ·ñʹÓûº´æ£¬Ä¬ÈÏΪtrue£¬ËùÒÔÒ»°ãÇé¿öÏÂÐèÒªÉèÖÃÒ»ÏÂÕâ¸öÊôÐÔ£¨*£© pagination: true, //ÊÇ·ñÏÔʾ·ÖÒ³£¨*£© sortable: false, //ÊÇ·ñÆôÓÃÅÅÐò sortOrder: "asc", //ÅÅÐò·½Ê½ queryParams: oTableInit.queryParams,//´«µÝ²ÎÊý£¨*£© sidePagination: "server", //·ÖÒ³·½Ê½£ºclient¿Í»§¶Ë·ÖÒ³£¬server·þÎñ¶Ë·ÖÒ³£¨*£© pageNumber:1, //³õʼ»¯¼ÓÔصÚÒ»Ò³£¬Ä¬ÈϵÚÒ»Ò³ pageSize: 10, //ÿҳµÄ¼Ç¼ÐÐÊý£¨*£© pageList: [10, 25, 50, 100], //¿É¹©Ñ¡ÔñµÄÿҳµÄÐÐÊý£¨*£© search: true, //ÊÇ·ñÏÔʾ±í¸ñËÑË÷£¬´ËËÑË÷ÊÇ¿Í»§¶ËËÑË÷£¬²»»á½ø·þÎñ¶Ë£¬ËùÒÔ£¬¸öÈ˸оõÒâÒå²»´ó strictSearch: true, showColumns: true, //ÊÇ·ñÏÔʾËùÓеÄÁÐ showRefresh: true, //ÊÇ·ñÏÔʾˢа´Å¥ minimumCountColumns: 2, //×îÉÙÔÊÐíµÄÁÐÊý clickToSelect: true, //ÊÇ·ñÆôÓõã»÷Ñ¡ÖÐÐÐ height: 500, //Ðиߣ¬Èç¹ûûÓÐÉèÖÃheightÊôÐÔ£¬±í¸ñ×Ô¶¯¸ù¾Ý¼Ç¼ÌõÊý¾õµÃ±í¸ñ¸ß¶È uniqueId: "ID", //ÿһÐеÄΨһ±êʶ£¬Ò»°ãΪÖ÷¼üÁÐ showToggle:true, //ÊÇ·ñÏÔʾÏêϸÊÓͼºÍÁбíÊÓͼµÄÇл»°´Å¥ cardView: false, //ÊÇ·ñÏÔʾÏêϸÊÓͼ detailView: false, //ÊÇ·ñÏÔʾ¸¸×Ó±í columns: [{ checkbox: true }, { field: 'Name', title: '²¿ÃÅÃû³Æ' }, { field: 'ParentName', title: 'Éϼ¶²¿ÃÅ' }, { field: 'Level', title: '²¿Ãż¶±ð' }, { field: 'Desc', title: 'ÃèÊö' }, ] }); }; //µÃµ½²éѯµÄ²ÎÊý oTableInit.queryParams = function (params) { var temp = { //ÕâÀïµÄ¼üµÄÃû×ֺͿØÖÆÆ÷µÄ±äÁ¿Ãû±ØÐëÒ»Ö±£¬Õâ±ß¸Ä¶¯£¬¿ØÖÆÆ÷Ò²ÐèÒª¸Ä³ÉÒ»ÑùµÄ limit: params.limit, //Ò³Ãæ´óС offset: params.offset, //Ò³Âë departmentname: $("#txt_search_departmentname").val(), statu: $("#txt_search_statu").val() }; return temp; }; return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { //³õʼ»¯Ò³ÃæÉÏÃæµÄ°´Å¥Ê¼þ }; return oInit; };

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • OmiÊ÷×é¼þomi-tree±àдָÄÏ - ¡¾µ±ÄÍÌØ¡¿

    OmiÊ÷×é¼þomi-tree±àдָÄÏ - ¡¾µ±ÄÍÌØ¡¿

    2017-05-02 15:04

  • HTML5 ½ø½×ϵÁУºÍÏ·Å API ʵÏÖÍÏ·ÅÅÅÐò - _ÁÖöÎ

    HTML5 ½ø½×ϵÁУºÍÏ·Å API ʵÏÖÍÏ·ÅÅÅÐò - _ÁÖöÎ

    2017-05-02 11:02

  • ÔÚDelphiÏÂʹÓÃѸÀ×APlayer×é¼þ½øÐÐÃâ×¢²á¿ª·¢ - DelphiÁ¦Á¿

    ÔÚDelphiÏÂʹÓÃѸÀ×APlayer×é¼þ½øÐÐÃâ×¢²á¿ª·¢ - DelphiÁ¦Á¿

    2017-04-28 15:00

  • JS×é¼þϵÁСª¡ª×Ô¼º¶¯ÊÖ·â×°bootstrap-treegrid×é¼þ - ÀÁµÃ°²·Ö

    JS×é¼þϵÁСª¡ª×Ô¼º¶¯ÊÖ·â×°bootstrap-treegrid×é¼þ - ÀÁµÃ°²·Ö

    2017-04-28 14:02

ÍøÓѵãÆÀ
¦