请问easyui中的table怎么添加一空行(可编辑的)

请问easyui中的table怎么添加一空行(可编辑的),第1张

<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

<link href="EasyUI/themes/icon.css" rel="stylesheet" />

<script src="EasyUI/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script>

<a id="btnAdd" href="javascript:void(0)">新增</a>

<a id="btnDel" href="javascript:void(0)">移除</a>

<a id="btnReject" href="javascript:void(0)"">撤销</a>

<div id="dg"></div>

javascript代码:

$(function () {

    $("#btnAdd").click(function () { addRow() }).linkbutton({ iconCls: 'icon-add', plain: true })

    $("#btnDel").click(function () { delRow() }).linkbutton({ iconCls: 'icon-remove', plain: true })

    $("#btnReject").click(function () { rejectRow() }).linkbutton({ iconCls: 'icon-undo', plain: true })

    $("#dg").datagrid({

        title: "DataGrid可编辑",

        //url: "Handler1.ashx",

        data: {

            "total": "2", "rows": [

                { "id": "0", "name": "Rosa", "remark": "这是一个大boss", "state": "0" },

                { "id": "1", "name": "Nick", "remark": "", "state": "0" },

                { "id": "2", "name": "Connie", "remark": "nothing", "state": "1" }]

        },

        columns: [[

            { field: "id", title: "ID", width: 20 },

            {

                field: "name", title: "姓名", width: 20,

                editor: {

                    type: "text",

                    options: {

                        required: true

                    }

                }

            },

            {

                field: "remark", title: "备注", width: 60,

                editor: {

                    type: "text",

                    options: {

                        required: true

                    }

                }

            },

            {

                field: "state", title: "显示", width: 60,

                editor: {

                    type: "combobox",

                    options: {

                        valueField: "id",

                        textField: "text",

                        data: [{ id: 0, text: "否" }, { id: 1, text: "是" }],

                        panelHeight: 50,

                        required: true

                    }

                }

            }

        ]],

        fitColumns: true,

        width: 500,

        height: 250,

        onClickRow: onClickRow

    })

})

// 判断时候存在编辑中的行

var editIndex = null

function endEditing() {

    if (editIndex == null) { return true }

    if ($('#dg').datagrid('validateRow', editIndex)) {

        $('#dg').datagrid('endEdit', editIndex)

        editIndex = null

        return true

    } else {

        return false

    }

}

// datagrid行点击事件

function onClickRow(index, row) {

    if (editIndex != index) {

        if (endEditing()) {

            $("#dg").datagrid("selectRow", index).datagrid("beginEdit", index)

            editIndex = index

        } else {

            $("#dg").datagrid("selectRow", editIndex)

        }

    }

}

// 添加一行

function addRow() {

    if (endEditing()) {

        //$("#dg").datagrid("appendRow")

        $("#dg").datagrid("appendRow", {

            name: "",

            remark: "",

            state: "0"

        })

        editIndex = $("#dg").datagrid("getRows").length - 1

        $("#dg").datagrid("selectRow", editIndex).datagrid("beginEdit", editIndex)

    }

}

// 删除一行

function delRow() {

    if (editIndex == null) { return }

    $('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex)

    editIndex = null

}

// 撤销修改

function rejectRow() {

    $('#dg').datagrid('rejectChanges')

    editIndex = null

}

要先初始化tabs后才能调用add方法,使用样式来初始化easyUI需要在dom

ready前将html代码添加到dom中,要不也无法初始化

var

tab

=

$("<div

id='tab_row_"

+

r

+

"_column_"

+

c

+

"'

class='easyui-tabs'

style='width:500pxheight:250px'>")

$('#xxxx').append(tab)

tab.tab()//要手动调用tabs进行初始化

var

content

=

"<table

id='table_datagrid_'"

+

view.id

+"></table>"

tab.tabs('add',

{

title:

view.title,

content

:

content,

closable:

true

})


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存