BootStrap 可编辑表Table格(2)

{field:"toRun",title:"Run Flag",align:"center",edit:{ type:'select',//下拉框 url:'./index.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】动态加载列这篇文章

$(function(){ var columnsAll = new Array(); //定义一个新的列集合，用来保存返回的数据 //把列数据封装到一个对象中 var col = {}; col["field"] = "index"; col["title"] = "ID"; col["align"] = 'center'; col["formatter"] = function(value, row, index){ return row.index=index ; //返回行号 }; col["edit"] = false; columnsAll.push(col); //把这个对象添加到列集合中 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", editable:true,//开启编辑模式 clickToSelect: true, cache: false, uniqueId: 'index', //将index列设为唯一索引 striped: true, minimumCountColumns: 2, smartDisplay:true, columns: [ columnsAll ] }); });

效果如下：

以上所述是小编给大家介绍的BootStrap 可编辑表Table格，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: