datagrid在默认情况下,我们只是用来展示数据,大多数情况下是和分页结合使用,但是偶尔的一些特殊需求,他要展示一个form表单的一些列表项,而且还可以在列表中进行修改,最终提交表单的时候,我们在列表里面的文本框或者下拉框中做的修改,能够体现在form表单中,我们知道,datagrid的columns属性,提供了如{field:"action",formatter:actions}的形式,可以直接对列表某一列做一个改变的格式化方法,我们可以给列表增加操作列,对列表数据中的日期做格式化,布尔类型的状态做文字“是|否”映射,等等,但是,如果需要对一个值做下拉框的映射,formatter就不好使了,这个时候,我们需要使用上editor这个属性,editor属性,同样也可以让列格式化,而且是格式化为一个组件textbox,combobox等等。
editor使用的格式如下:
editor:{
type:"combobox",
options:{textField:"text",valueField:"value",data:json,panelHeight:'auto'}
}
从直观上看,和直接在页面上写上类似。
这种对field做映射的方法,当我们初始化datagrid之后,而且加载了数据,效果和没有做格式化差不多,这里要让,格式化生效,还需要注意一个步骤,那就是调用datagrid("beginEdit",index)这个方法,让页面重新渲染成我们预期的结果。下拉框的展示下拉框,文本框的展示文本框。
直接上代码:
datagrid+combobox+textbox
最终的展示效果如下所示:
这里需要注意一点的就是,列表项中带有下拉框和文本框的,最终,我们获取列表数据时调用datagrid("getData")获取到的值是列表最初加载的时候的数据,如果在提交表单之前,我们对列表的相关数据项做了更改,那么这时候,我们希望得到的数据是更改之后的数据。所以datagrid("getData") 方法在这里失效了。
当然,为了解决这个问题,我们可以通过如下的方法,获取某一列的修改后的真实值。
var ele = $("#datagrid").datagrid("getEditor",{field:'name',index:i});
var value = $(ele.target).val();
如下图所示,当我们对101,102的姓名和101的性别做了更改,最终,我们希望得到如列表中展示一样的结果,我们通过我们的解决办法,正确获取了datagrid中的真实值。查看控制台,我们得到的结果符合我们的预期。
另外,这个表格其实可以做的更加的完美,表头增加一个增加列的工具按钮,每一行的行尾增加一个删除的按钮。
增加一栏,我们需要注意,增加的内容,不能是一个空的对象,否则最后获取值的时候,也获取不到,属性是空的。可以增加一行这样的数据。让他填充表格的一行,然后,我们可以通过修改的方式,让他改变属性值。
function addRow(){
var index = $("#datagrid").datagrid("getData").total;
$("#datagrid").datagrid("appendRow",{id:104,name:"ddd",age:20,gender:"1"});
$("#datagrid").datagrid("beginEdit",index);
}
删除一行的时候,我们可以借助在格式化时传入的index,那么,删除之后,index就会发生改变,所以,我们还需要重新加载表格数据,让index改变。
function deleteRow(index){
$("#datagrid").datagrid("deleteRow",index);
var data = $("#datagrid").datagrid("getData");
$("#datagrid").datagrid("loadData",data);
}
最终的展示效果: