登录 注册

NUI框架下CRUD开发

发布时间:Jun 12, 2019 10:25:25 AM 发布人:管理员


归属栏目: EOS开发


外部链接: 


关键字: 


归属栏目: EOS开发


文章来源: 


摘要: 

NUI框架下:CRUD操作开发

本文介绍如何利用NUI平台开发CRUD操作:增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete),的具体实现写法。

效果图如下:

1   查询数据

首先,我们创建一个数据表格:

<div id="datagrid1" class="nui-datagrid" style="width:700px;height:250px;"

    url="org.gocom.components.nui.demo.newdataset.impl.TEmployee.queryEmployee.biz.ext"  idField="id" allowResize="true"

> 

    <div property="columns">

        <div type="indexcolumn"></div>

        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>

        <div field="name" width="120" allowSort="true">姓名</div>

        <div field="age" width="60" allowSort="true">年龄</div>

        <div field="birthday" width="100" dateFormat="yyyy-MM-dd">出生日期</div>

    </div>

</div>

定义一个search函数,实现查询功能:

function search() {

var key = document.getElementById("key").value;

grid.load({ key: key });

}

2    编辑数据

给需要编辑的列,加上不同的编辑器,代码如下:

<div id="datagrid1" class="nui-datagrid" style="width:700px;height:250px;"

    url="org.gocom.components.nui.demo.newdataset.impl.TEmployee.queryEmployee.biz.ext"  idField="id" allowResize="true"

> 

    <div property="columns">

        <div type="indexcolumn"></div>

        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>

        <div field="name" width="120" allowSort="true">姓名

            <!-textbox editor->

            <input property="editor" class="nui-textbox" style="width:100%;"/>

        </div>

        <div field="age" width="60" allowSort="true">年龄

            <!-spinner editor->

            <input property="editor" class="nui-spinner"

                minValue="0" maxValue="200" value="25" style="width:100%;"/>

        </div>

        <div field="birthday" width="100" dateFormat="yyyy-MM-dd">出生日期

            <!-datepicker editor->

            <input property="editor" class="nui-datepicker" style="width:100%;"/>

        </div>

    </div>

</div>

调用如下"beginEditRow"方法,将选中行进入编辑状态:

function editRow() {

    var row = grid.getSelected();

    if (row){ grid.beginEditRow(row); 

    }

}

使用ajax将编辑的数据提交到服务端,实现保存功能:

function saveData() {

    var rowsData = grid.getEditData();

    var json = nui.encode(rowsData);

 

    grid.loading("保存中,请稍后......");

    nui.ajax({

        url: "org.gocom.components.nui.demo.newdataset.impl.TEmployee.queryEmployee.biz.ext",

        data:{ employees: json },

        success: function (text){ 

            grid.reload(); 

        },

        error: function (jqXHR, textStatus, errorThrown){ 

            alert(jqXHR.responseText); 

        }

    });

}

3、 新增记录

使用addRow方法,新增记录后,进行编辑,最后保存。

function addRow() {

    var newRow ={name: "New Row"};

    grid.addRow(newRow, 0);

    grid.beginEditRow(newRow);

}

4、除记录

获取选中记录,使用ajax将记录的id发送到后台,进行删除操作:

function deleteRow() {

    var rows = grid.getSelecteds();

    if (rows.length > 0) {

        if (confirm("确定删除选中记录?")) {

            var ids = [];

            for (var i = 0, l = rows.length; i < l; i++){ 

                var r = rows[i]; 

                ids.push(r.id); 

            }

            var id = ids.join(',');

            grid.loading("操作中,请稍后......");

            nui.ajax({

                url: "org.gocom.components.nui.demo.newdataset.impl.TEmployee.deleteEmployee.biz.ext" ,

                success: function (text){ 

                    grid.reload(); },

                error: function () {

                }

            });

        }

    } else{ 

        alert("请选中一条记录"); 

    }

}

5、 {C}{C}服务端AjaxServer处理

查询数据:

public void SearchEmployees()

{

    //查询条件

    string key = Request"key";

    //分页

    int pageIndex = Convert.ToInt32(Request"pageIndex");

    int pageSize = Convert.ToInt32(Request"pageSize");

    //字段排序

    String sortField = Request"sortField";

    String sortOrder = Request"sortOrder";

    //业务层:数据库操作

    Hashtable result = new TestDB().SearchEmployees(key, pageIndex, pageSize, sortField, sortOrder);

    //JSON

    String json = PluSoft.Utils.JSON.Encode(result);

    Response.Write(json);

}

保存数据(新增、编辑):

public void SaveEmployees()

{

    String employeesStr = Request"employees";

    ArrayList employees = (ArrayList)PluSoft.Utils.JSON.Decode(employeesStr);

 

    foreach (Hashtable employee in employees)

    {

        if (employee"name" == null) throw new Exception("用户名不能为空");

        if (employee"id" == null || employee"id".ToString() == "")

 

        { 

            employee["createtime"] = DateTime.Now; 

            new TestDB().InsertEmployee(employee); 

        }

        else

        { 

            new TestDB().UpdateEmployee(employee); 

        }

    }

}

删除数据:

public void RemoveEmployees()

{

    String idStr = Request"id";

    if (String.IsNullOrEmpty(idStr)) return;

    String[] ids = idStr.Split(',');

    for (int i = 0, l = ids.Length; i < l; i++)

    { 

        string id = ids[i]; 

        new TestDB().DeleteEmployee(id); 

    }

}

 


相关文章

返回