基于bootstracp的html框架的整体结构

1.首先是from表单

@form("search-condition"){

　　@row(){

　　　　@input(）

　　　　@combobox（）//属性multiple:是否支持多选

　　　　@combotree（）

　　　　...

　　}　　

　　@btnbox(align:"right"){//用来放置多个按钮
　　　　@button_search(onclick:"searchByConditions")
　　　　@button_clear(onclick:"clearCondition")
　　}

}

2.然后是table

@table(){

　　//添加按钮          ,table控件的工具栏(按钮容器)，仅用于table控件内部，内部可以嵌入1到多个button按钮,改按钮会显示在table的左上方

　　@toolbar(){

　　　　@button()

　　　　...

　　}

　　@columns(){   //在table控件内部使用

　　　　//表格开头添加一个排序框　　　　

　　　　{field: 'number',title:"序号",sortable:false,align:'center',formatter:
　　　　　　function(value,row,rowIndex){
　　　　　　　　return rowIndex + 1;
　　　　　　}
　　　　},

　　　　//操作栏

　　　　@optcolumn(width:230){　　//用于table控件的columns中，专门定义操作列，内部可以使用iconlink控件定义操作按钮

　　　　　　@iconlink(）//可以点击的图标控件，主要用于optcolumn容器中来定义各种操作图标

　　　　　　...

　　　　}

　　　　//表格数据显示

　　　　{field:...}

　　　　{field: 'requirementName',title:"需求名称",sortable:false,align:'left',class:"nowrapclass",showAllLength:true,

　　　　formatter:function(value, row, index) {
　　　　　　return "<a class='link-rythm' onclick='edit(\""+row.seqno+"\")' style='color:#3BAFDA;' >" + value + "</a>";
　　　　　　}
　　　　},//value: 代表当前单元格中的值。row：代表当前行。index: 代表当前行的下标。

　　　　...

 

　　}

}