1、在 columns 配置中设置需要显示 checkbox 的列,示例代码如下:
columns:[[
{field:'id',title:'ID',width:80},
{field:'name',title:'Name',width:100},
{field:'gender',title:'Gender',width:100},
{field:'checkbox',title:'',checkbox:true},
]],
在这个示例中,第 4 列设置了 checkbox。
2、在 easyui datagrid 的 toolbar 中添加按钮,并绑定事件,示例代码如下:
toolbar:[{
text:'Get Selected',
iconCls:'icon-search',
handler:function(){
var rows = $('#dg').datagrid('getSelections')
alert(rows.length+' rows are selected.')
}
}]
在这个示例中,添加了一个名为 "Get Selected" 的按钮,点击按钮会获取当前选中的行,并d出提示框显示选中的行数。
3、在点击按钮时获取选中的行,示例代码如下:
var rows = $('#dg').datagrid('getSelections')
在这个示例中,使用 easyui datagrid 的 getSelections 方法获取选中的行数据。
4、在获取选中的行后,可以对这些行进行后续的 *** 作,例如对每行进行遍历,获取某一列的值,示例代码如下:
for(var i=0i<rows.lengthi++){
var row = rows[i]
console.log(row.id)// 获取 id 列的值
}
在这个示例中,使用 for 循环遍历选中的行数据,然后使用 row.id 获取 id 列的值。
以上就是在 easyui datagrid 中设置列为 checkbox 并能获取选中的值的 *** 作步骤。
getSelections:返回所有选中的行,当没有选中的记录时,将返回空数组。返回的是datagrid的行对象数组,直接用selectedData["HOUSE_ID"]是取不到东西的
selectedData[0]表示获取到选中行的第一行,selectedData[0].HOUSE_ID表示获取到选中行的第一行的HOUSE_ID值,假设有这个属性的话
1、百度搜索easyui,找到easyui的官网,下载easyui的jsAPI文件,并将js文件添加到项目中。
2、新建html页面,将easyui的关键js文件及css文件引入到页面。
3、在页面声明datagrid的渲染元素,该元素主要是datagrid显示的载体。
4、编写js模块,为datagrid绑定数据源及配置字段及属性,到这里,datagrid的配置就完成了,这时,我们运行页面就可以得到一个带分页的列表。
5、编写获取datagrid选中行的js,具体实现如下。
6、运行页面,我们就可以看到相应的结果。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)