BootStrap 可编辑表Table格

前端之家收集整理的这篇文章主要介绍了BootStrap 可编辑表Table格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、 显示数据(基础功能

在html页面中定义表格以及表格的列名,最后把从数据库查询出来的数据,循环显示页面中。这个系统用的是PHP语言,里边用到了PHP中的语法,如果是Java语言,把PHP换成jsp中对应的语法就行

序号 Category SubProcess Name Description Do Action ActionID; ?>Category; ?>ActionName; ?> Description; ?>

二、表格编辑(高级功能

在html页面中,先定义一个表格,然后到js中初始化。这个功能引用了一个第三方插件,可以到这里下载 http://bootstrap-table.wenzhixin.net.cn/zh-cn/,这个插件修改了 http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 里边的一些功能后形成的。在使用过程中,我做了一些小的改动,大家用的时候可以根据情况来

1. 效果展示

表格初始化后

添加新行

2. 在使用时,首先需要引入它的js,我是统一引用到入口文件中的

页面中定义表格,可添加自定义按钮

>

3. js初始化表格

PHP?r=subprocess/subprocessInfo",editable:true,//开启编辑模式 clickToSelect: true,cache: false,showToggle:true,//显示切换按钮来切换表/卡片视图。 showPaginationSwitch:true,//显示分页切换按钮 pagination: true,pageList: [10,25,50,100],pageSize:10,pageNumber:1,uniqueId: 'index',//将index列设为唯一索引 striped: true,search: true,showRefresh: true,minimumCountColumns: 2,smartDisplay:true,columns: [ [ {field:"index",title:"ID",align:"center",edit:false,formatter:function(value,row,index){ return row.index=index ; //返回行号 }},{field:"actionName",title:"ActionName",order:"asc",sortable:"true",index){ var strHtml =''; return strHtml; }},{field:"category",title:"Category",sortable:"true"},{field:"description",title:"Description",align:"center"},{field:"action",title:"Action",index){ var strHtml =''+ ''; return strHtml; },edit:false},{field:"actionId",title:"ActionID",visible:false,searchable:false} ] ] });

/**

  • add a new row
    */
    $('#addData').click(function(){
    $('#subprocessTable').bootstrapTable('selectPage',1); //Jump to the first page
    var data = {actionId: '',actionName: '',category:'',description: ''}; //define a new row data,certainly it's empty

$('#subprocessTable').bootstrapTable('prepend',data); //the method of prepend must defined all fields,but append needn't
//$('#dataTable').bootstrapTable('append',data);

$("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick");
$("#dataTable input")[0].focus();
});
});

需要用下拉列表的,在定义列的时候这样定义

PHP?r=dictionary/dictionaryInfo&type='+"run",//data:[{id:1,text:'hello'},{id:2,text:'hi'}],valueField:'id',textField:'text',editable : false,onSelect:function(val,rec){ //console.log(val,rec); } },sortable:true}

效果如下

其它的操作,大家可以到这个插件的网站上查阅文档,或者看js源码

三、动态表头

动态表头,说到底就是每次的列数据是不固定的,根据前提条件查询数据库,再根据查询结果加载表头。有了上边的修改,实现这个功能已经不在话下,只要把初始化表格的columns替换成我们自定义的数据就可以了,做了个简单的小demo,具体的可以看【EasyUi DataGrid】动态加载列这篇文章

添加到列集合中 var col2 = {}; col2["field"] = "scenarioId"; col2["title"] = "haha"; col2["align"] = 'center'; col2["edit"] = false; columnsAll.push(col2); //把这个对象添加到列集合中 //表格数据 $('#detailTable').bootstrapTable({ method: 'get',url:"./index.PHP?r=session/sessionInfo",columns: [ columnsAll ] }); });

效果如下:

以上所述是小编给大家介绍的BootStrap 可编辑表Table格。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/44207.html

猜你在找的Bootstrap相关文章