jquery -easyui -- 将一些控件集成到datagrid上

html代码

<table id="machineinfo"><!--datagrid要绑定的对象--> </table> <!--加载到datagrid的toolbar上 --> <select id="kinds" class="easyui-combobox"><!--下拉框1 --> <option value="SBMC">设备名称</option> <option value="ZZCS">制造厂商</option> </select> <select id="Select1" class="easyui-combobox"><!--下拉框2 --> <option value="SBMC">cccc</option> <option value="ZZCS">cccc</option> </select> <div id="separator1" class="datagrid-btn-separator"></div><!--分隔符1 --> <div id="separator2" class="datagrid-btn-separator"></div><!--分隔符2 --> <!---->

js代码

在datagrid的onLoadSuccess: 事件中编写如下代码

比较关键的是这句代码$(this).attr("style", "float:left"); 如果不加这与句，用做分隔符的<div>会挤到一起

如果不加情况是这样，注意红线的地方堆积这两个div。实现的布局是让div分割两个下拉框的

onLoadSuccess: function () { var separator1 = $("#separator1"); //toolbar上的竖线 var separator2 = $("#separator2"); var grid = $(".datagrid-toolbar"); //datagrid var dropkinds = $("#kinds"); var select1 = $("#Select1"); var combox = $(".combobox"); grid.append(separator1); grid.append(dropkinds); $(combox).each(function (i) { $(this).attr("style", "float:left"); grid.append(this) if (i == 0) { grid.append(separator2); } }); },