jQuery EasyUI DataGrid表格中行的增删改查代码

08/01 EasyUI 阅读 990 views 次 人气 0
摘要:

DataGrid通过初始化之后,表格中显示出了数据列表,根据客观需要,以数据列表的行为单元,进行增、删、改、查的功能点实现,实现代码如下。

DataGrid table代码:

<table id="dg" width="600px" class="easyui-datagrid"
            rownumbers="true" fitColumns="false" singleSelect="true" 
            style="" data-options="singleSelect:true,collapsible:true">
</table>


DataGrid JS初始化代码:

$('#dg').datagrid({ 
    url: '<%=path %>/req.action?method=list',
    queryParams: { 
        resUuid : '<%=uuid %>'
    },
    loadMsg: '数据加载中......',
    columns:[[
        {field:'signId',title:'<b>标识</b>',width:'20%',align:'left'},
        {field:'name',title:'<b>名称</b>',width:'40%',align:'left'},
        {field:'default',title:'<b>客户端</b>',width:'20%',align:'center'},
        {field:'opt',title:'<b>操作</b>',width:'18%',align:'center',
            formatter: function(value,rowData,rowIndex){
                var signId = rowData['signId'];
                var txt = "<a href=\"javascript:void(0);\" onclick=\"delete('"+signId+"');\">删除</a>"; 
                return txt;
            }
        }
    ]]
});


DataGrid表格中遍历每一行数据:

var rows = $('#dg').datagrid('getRows');
for(var i=0;i < rows.length;i++){
    var signId = rows[i]['signId'];
    var name = rows[i]['name'];
}


DataGrid表格中增加一行数据:

$("#dg").datagrid('insertRow', {
    index: 0,
    row: {
        "signId":"jwgl2",
        "name":"教务管理客户端",
        "default":2
    }
});

索引为0的位置增加一行,即第一行。


DataGrid表格中删除的一行数据:

$('#dg').datagrid('deleteRow', 0);

索引为0的位置删除一行,即删除第一行。



评论

该文章不支持评论!

分享到: