如何使用jQuery EasyUI Mobile编辑数据表格中的行

以下是如何使用jQuery EasyUI Mobile编辑数据表格中的行的完整攻略。

1. 引入EasyUI Mobile库

为了使用EasyUI Mobile来编辑数据表格中的行，我们需要首先在HTML文件中引入EasyUI Mobile库。在HTML文件中加入以下代码：

<!--引入EasyUI Mobile库-->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.1/themes/mobile.css">
<script type="text/javascript" src="jquery-easyui-1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.1/jquery.easyui.min.js"></script>

2. 创建数据表格

我们需要先创建数据表格，并将编辑功能添加到数据表格中。在HTML文件中加入以下代码：

<!--创建数据表格-->
<table id="dg" class="easyui-datagrid"
       data-options="url:'data.php',method:'get',singleSelect:true,rownumbers:true,fit:true,
                     toolbar: [{iconCls:'icon-add',handler:function(){
                                     $('#dg').datagrid('appendRow',{});
                             }},{iconCls:'icon-remove',handler:function(){
                                     var row = $('#dg').datagrid('getSelected');
                                     if (row) {
                                         var index = $('#dg').datagrid('getRowIndex', row);
                                         $('#dg').datagrid('deleteRow', index);
                                     }
                             }},{iconCls:'icon-save',handler:function(){
                                     $('#dg').datagrid('acceptChanges');
                             }},{iconCls:'icon-undo',handler:function(){
                                     $('#dg').datagrid('rejectChanges');
                             }}]"
       style="width:100%;height:500px" rowdblclick="onDblClickRow()">
    <thead>
        <tr>
            <th field="id" width="50" editor="{type:'validatebox',options:{required:true}}">ID</th>
            <th field="name" width="50" editor="{type:'validatebox',options:{required:true}}">Name</th>
            <th field="age" width="50" editor="{type:'validatebox',options:{required:true}}">Age</th>
            <th field="email" width="80" editor="{type:'validatebox',options:{required:true}}">Email</th>
        </tr>
    </thead>
</table>

3. 编写编辑数据表格中的行的代码

现在我们要编写可以编辑数据表格中的行的代码。这里我们使用EasyUI Mobile的form组件来编辑行数据。在HTML文件中加入以下代码：

<!--创建编辑对话框-->
<div id="dlg" class="easyui-dialog" style="width:350px;height:250px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">Edit User</div>
    <form id="fm" method="post">
        <div class="fitem">
            <label>ID:</label>
            <input name="id" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Name:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Age:</label>
            <input name="age" class="easyui-validatebox" validType="number" required="true">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email" required="true">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

<!--编辑行数据的脚本-->
<script type="text/javascript">
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

    function onDblClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }

    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{status:'P'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
        }
    }

    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }

    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }

    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }

    function getChanges(){
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }

    function saveUser(){
        //获取编辑框中的数据
        var id = $('#fm input[name="id"]').val();
        var name = $('#fm input[name="name"]').val();
        var age = $('#fm input[name="age"]').val();
        var email = $('#fm input[name="email"]').val();
        var user = {id: id, name: name, age: age, email: email};

        //更新数据
        var index = $('#dg').datagrid('getRowIndex', editIndex);
        $('#dg').datagrid('updateRow', {
            index: index,
            row: user
        });

        //关闭编辑框
        $('#dlg').dialog('close');
    }
</script>

4. 示例说明

接下来，我们给出两个示例说明：

示例1：编辑数据表格中的行并更新后台

假设我们有以下数据表格：

<table id="dg" class="easyui-datagrid"
       data-options="url:'get_data.php',method:'post',singleSelect:true,rownumbers:true,fit:true,
                     toolbar: [{iconCls:'icon-add',handler:function(){
                                     append();
                             }},{iconCls:'icon-remove',handler:function(){
                                     removeit();
                             }},{iconCls:'icon-save',handler:function(){
                                     accept();
                             }},{iconCls:'icon-undo',handler:function(){
                                     reject();
                             }}]" style="width:100%;height:400px" rowdblclick="onDblClickRow()">
        <thead>
            <tr>
                <th field="id" width="20" editor="{type:'validatebox',options:{required:true}}">ID</th>
                <th field="name" width="50" editor="{type:'validatebox',options:{required:true}}">Name</th>
                <th field="age" width="20" editor="{type:'numberbox'}">Age</th>
                <th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
            </tr>
        </thead>
    </table>

这是一个由后台PHP代码生成的表格。我们可以使用EasyUI Mobile提供的功能来编辑该表格，并将编辑后的数据提交到后台。下面是相关的JS代码：

function saveUser(){
    //获取编辑框中的数据
    var id = $('#fm input[name="id"]').val();
    var name = $('#fm input[name="name"]').val();
    var age = $('#fm input[name="age"]').val();
    var email = $('#fm input[name="email"]').val();
    var user = {id: id, name: name, age: age, email: email};

    //更新数据
    var index = $('#dg').datagrid('getRowIndex', editIndex);
    $('#dg').datagrid('updateRow', {
        index: index,
        row: user
    });

    //将更改后的数据提交到后台
    $.ajax({
        url: 'update_data.php',
        type: 'post',
        data: user,
        success:function(data){
            alert(data);
        }
    });

    //关闭编辑框
    $('#dlg').dialog('close');
}

上面的代码使用了ajax请求将更改后的数据提交到后台。后台接收到数据后，可以将数据更新到数据库中。

示例2：限制数据表格中的行的编辑

假设我们要限制数据表格中“ID”列的编辑，使其不能被编辑。我们可以将数据表格中的“ID”列的editor属性设置为null。下面是相关的JS代码：

<th field="id" width="20" editor="{type:'validatebox',options:{required:true}}">ID</th>
<th field="name" width="50" editor="{type:'validatebox',options:{required:true}}">Name</th>
<th field="age" width="20" editor="{type:'numberbox'}">Age</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>

我们只需要将上面代码中的“ID”列的editor属性设置为null即可。修改后的代码如下：

<th field="id" width="20" editor="null">ID</th>
<th field="name" width="50" editor="{type:'validatebox',options:{required:true}}">Name</th>
<th field="age" width="20" editor="{type:'numberbox'}">Age</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>

这样，数据表格中的“ID”列就不能被编辑了。

到这里，使用jQuery EasyUI Mobile编辑数据表格中的行的完整攻略就讲解结束了。希望我的回答可以帮助到你。如果还有其他问题，请随时向我提问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery EasyUI Mobile编辑数据表格中的行 - Python技术站