求教easyui datagrid如何动态生成列

求教easyui datagrid如何动态生成列,第1张

动态产生列的代码,其实就是按datagrid所需列的json格式,拼凑成字符串还可以实现列合并

//用字符串产生grid所需的列

function AddColspanGridColumn(fieldName, title, width, align, rowStyle, formatterStyle,colspan) {

var columnStr = ""

//Easyui的datagrid列的基本格式

columnStr = "{field: '" + fieldName + "', title: '" + title + "', width: " + width

//对齐方式

if (align != "" &&align != null &&align != undefined)

columnStr += ",align:'" + align + "'"

//是否合并列

if (colspan != 0 &&colspan != "" &&colspan != null &&colspan != undefined)

columnStr += ",colspan:" + colspan

//是否需要行样式

if (rowStyle != "" &&rowStyle != null &&rowStyle != undefined)

columnStr += ",styler: function (val, row, index) {return '" + rowStyle + "'}"

if (formatterStyle != "" &&formatterStyle != null &&formatterStyle != undefined)

columnStr += ",formatter: function (val, row, index) {" +

"if (val == '' || val == undefined) val = '0'" +

"return \"<span style='" + formatterStyle + "'>\"+val+\"</span>\"}"

columnStr += "}"

return columnStr

}

然后把产生的json字符串给datagrid,

var options = $("#" + gridName).datagrid("options")

var columnstr =

AddColspanGridColumn("AVG_PRICE", "户均价", 80, "left",

"background-color:#F6B03E",

"font-size:14pxfont-weight:bold",

0)

options.columns = eval(columnstr)

设置列内容为超链接,参考函数里的formatter,设置列的内容的

在 easyui datagrid 中设置列为 checkbox 并能获取选中的值,可以按照以下步骤进行 *** 作:

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 并能获取选中的值的 *** 作步骤。

easyui-datagrid怎么获取所有行列值方法:

1、定义id为datagrid的easyui-datagrid,并将其置于id为div-dg的div内;

2、定义datagrid的列时,使用下面的方式为datagrid添加文本框列,并将其value设置为100;

3、使用如下的方式获取文本框列的第一个值,使用eq(index)方法可以获取第任意个文本框的值;

4、结果并未能如愿,查看生成的html源代码;

5、发现,生成的文本框列位于id为div-dg的div内,而不是id为datagrid的table下面,所以才会出现前面所述的结果。正确的获取文本框列的值的方法如下。

如需获取每一行的行列值,内容如下:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11534834.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存