grid

grid

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks
CRUD之:行编辑
                       

参考示例CRUD之:行编辑

                     

一:创建单元格编辑器

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url="../data/DataService.aspx?method=SearchEmployees" 
>
    <div property="columns">
        <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
            <input property="editor" class="mini-textbox" />
        </div>                
        <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别
            <input property="editor" class="mini-combobox" style="width:100%;" data="[{id:1,text:'男'}, {id:2, text: '女'}]"/>                
        </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="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>            

比如:mini-textbox的property为"editor",表示是此列的编辑器。




           

二:编辑操作

开始编辑行:
grid.beginEditRow(row);
取消编辑:
grid.cancelEdit();

提交编辑数据:

var rowData = grid.getEditRowData(row);
grid.loading("保存中,请稍后......");
var json = mini.encode([rowData]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});
posted on 2012-11-14 16:32 nikofan 阅读(4951) 评论(2)  编辑  收藏

Feedback

# re: jQuery MiniUI 开发教程 表格控件 表格编辑:行编辑器(十一) 2014-01-13 11:12
是是是  回复  更多评论
  

# re: jQuery MiniUI 开发教程 表格控件 表格编辑:行编辑器(十一) 2015-04-10 17:26 请问
怎么校验  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: