`
nikofan
  • 浏览: 227698 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

jQuery MiniUI 开发教程 表格控件 表格编辑:单元格编辑(十)

阅读更多
CRUD之:单元格编辑


参考示例:单元格编辑

一:创建单元格编辑器
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
    url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
    allowResize="true" pageSize="20"
    allowCellEdit="true" allowCellSelect="true" multiSelect="true">
    <div property="columns">
        <div type="checkcolumn"></div>           
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
            <input property="editor" class="mini-textbox" style="width:100%;"/>
        </div>               
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
            <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>               
        </div>
        <div field="age" width="100" allowSort="true" >年龄
            <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
        </div>
        <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
        </div>   
        <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
            <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
        </div>                                
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
    </div>
</div>

设置allowCellEdit和allowCellSelect后,表格为单元格编辑模式。

二:编辑操作
增加行:
function addRow() {
    var newRow = { name: "New Row" };
    grid.addRow(newRow, 0);
}

删除行:
function removeRow() {
    var rows = grid.getSelecteds();
    if (rows.length > 0) {
        grid.removeRows(rows, true);
    }
}

保存数据:
function saveData() {
    //获得增加、删除、修改的记录集合
    var data = grid.getChanges();
    var json = mini.encode(data);
    grid.loading("保存中,请稍后......");       
    $.ajax({
        url: "../data/AjaxService.aspx?method=SaveChangedEmployees",
        data: { data: json },
        type: "post",
        success: function (text) {
            grid.reload();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });
}

三:服务端处理
public void SaveChangedEmployees()
{
    String json = Request["data"];
    ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);

    foreach (Hashtable row in rows)
    {
        //根据记录状态,进行不同的增加、删除、修改操作
        String state = row["_state"] != null ? row["_state"].ToString() : "";
        if(state == "added")
        {
            row["createtime"] = DateTime.Now;
            new TestDB().InsertEmployee(row);
        }
        else if (state == "removed" || state == "deleted")
        {
            String id = row["id"].ToString();
            new TestDB().DeleteEmployee(id);
        }
        else if (state == "modified")
        {
            new TestDB().UpdateEmployee(row);
        }
    }
}

0
0
分享到:
评论

相关推荐

    jquery miniui 教程 表格控件 合并单元格应用

    本文主要讲述的是在jQuery miniUI中如何应用表格控件来合并单元格。 合并单元格是表格布局中常用的一个功能,它可以将多个相邻的单元格合并为一个单元格,这样可以使表格的布局更加符合特定的展示需求,比如在一个...

    JQUERY MINIUI 学习资料

    1. **组件丰富**:MiniUI 包含了大量的前端组件,如表格(Table)、表单(Form)、树形结构(Tree)、下拉选择(ComboBox)、日期选择器(DateBox)等,几乎涵盖了常见的 Web UI 元素。 2. **易于使用**:通过简单...

    jQuery MiniUI 2.1.5 官方版本,作个保留

    •超强表格:提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。 •第三方兼容:与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。 •浏览器兼容:支持IE6+、FireFox、...

    jQuery MiniUI-jar 包

    1. **组件丰富**:MiniUI包含了大量的UI组件,如表格(Grid)、树(Tree)、下拉选择框(ComboBox)、日期选择器(DatePicker)等,这些组件都进行了充分的封装,使得开发过程更为简洁。 2. **响应式设计**:框架...

    jQuery miniui_php

    jQuery miniUI 是一个基于 jQuery 的轻量级前端开发框架,专为 PHP 开发者设计,提供了一系列强大的组件,如表格、表单、按钮、对话框等,帮助开发者快速构建用户界面。它简化了网页交互,提高了开发效率,并且具有...

    jquery插件,基于jquery的表格控件无刷新实现添加编辑删除统计功能

    本文将深入探讨一个基于jQuery的表格控件,该控件实现了无刷新的添加、编辑、删除和统计功能,以VS2008为开发环境,利用Ajax技术,结合JSON数据格式,为用户提供流畅的交互体验。 一、jQuery与Ajax基础 jQuery简化...

    jquery表格控件

    在Web开发领域,jQuery表格控件作为一款功能强大的工具,深受开发者喜爱。其丰富的特性、高效的性能以及易于使用的API,使其成为实现数据展示、操作和管理的理想选择。本文将深入探讨jQuery表格控件的核心特性,并...

    jQuery MiniUI

    1. **控件丰富**:MiniUI 包含了一系列常见的Web UI组件,如表格(Grid)、下拉选择框(ComboBox)、日期选择器(DatePicker)、对话框(Dialog)、分页(Pager)、表单(Form)等,这些控件设计精良,易于集成,...

    jquery miniui

    1. **jQuery 基础**:MiniUI 是基于 jQuery 构建的,因此熟悉 jQuery 的选择器、事件处理和 DOM 操作至关重要。 2. **HTML & CSS**:理解基本的 HTML 结构和 CSS 样式,以便正确地布局和美化 MiniUI 组件。 3. **...

    miniui_java_myeclipse.rar_jQuery miniUI_java miniui_miniui

    5. 图标和其他资源:MiniUI 可能附带了用于组件的图标和其他图形资源。 使用 MiniUI 可以极大地提高 Java Web 开发的生产力,提供高质量的用户界面。通过与 MyEclipse 的整合,开发者可以在熟悉的开发环境中享受到 ...

    jQuery AJAX表格控件源码

    在网页开发中,数据展示和交互是不可或缺的部分,jQuery AJAX表格控件就是一种高效、动态的数据呈现方式。它利用jQuery库的强大功能,结合AJAX技术,实现在不刷新整个页面的情况下进行数据的加载、编辑和删除,提升...

    JQUERY基础教程实例(表格编辑)

    在编辑表格内容时,通常会将静态文本替换为可编辑的输入元素,比如`&lt;input&gt;`或`&lt;textarea&gt;`。jQuery的`.html()`和`.append()`方法可以实现这样的转换。例如,`$(this).html("$(this).text() + "'&gt;")`会将当前单元格...

    jquery miniui 3.0

    1. **组件丰富**:MiniUI 提供了诸如表格(Grid)、表单(Form)、按钮(Button)、对话框(Dialog)、下拉菜单(ComboBox)、树形控件(Tree)等常见 Web UI 组件,覆盖了日常开发中的大部分需求。 2. **数据绑定*...

    jQuery实现可编辑表格

    总结一下,jQuery实现可编辑表格主要涉及以下步骤: 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式,使输入框融入表格。 3. 使用jQuery监听事件,实现表格单元格的编辑和保存功能。 这个简单的示例展示了...

    jquery jquery控件 时间控件 时分秒控件

    在本文中,我们将深入探讨jQuery时间控件,特别是那些能够显示和选择时、分、秒的控件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。时间控件在Web应用中非常常见,...

    asp.net处理不规则表格 结合jquery处理不规则表格

    在ASP.NET开发中,我们经常会遇到需要处理不规则表格的情况,这些表格可能具有不同数量的行、列或者具有动态变化的结构。在这种情况下,结合jQuery的强大学习库,我们可以有效地管理和操作这些复杂的表格数据。以下...

    jQuery MiniUI 3.3

    - **jQuery 基础**:MiniUI 是基于 jQuery 构建的,因此理解 jQuery 的基础操作,如选择器、事件处理、DOM 操作等,是使用 MiniUI 的前提。 - **模块化设计**:MiniUI 遵循模块化设计理念,将各种功能组件独立封装...

Global site tag (gtag.js) - Google Analytics