设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › WEB开发 › JAVA讨论 › 表格行内编辑
12下一页
返回列表 发新帖
查看: 6289|回复: 12
打印 上一主题 下一主题

表格行内编辑 [复制链接]

wansgibo

Rank: 3Rank: 3
跳转到指定楼层
楼主
发表于 2014-6-9 09:35:29 |只看该作者 |倒序浏览
<div id="datagrid1" class="mini-datagrid" style="width:750px;height:250px;"  allowResize="true"
        url="../data/AjaxService.aspx?method=SearchEmployees"  idField="id" emptyText="数据为空，<a href='javascript:newRow()'>增加一条</a>" showEmptyText="true"
    >
        <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" style="width:100%;"/>
            </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>      
            <!--ComboBox：本地数据-->         
            <div type="comboboxcolumn" field="gender" width="100" allowSort="true"  align="center" headerAlign="center">性别
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>               
            </div>                              
            <!--ComboBox：远程数据-->         
            <div type="comboboxcolumn" field="country" width="100" headerAlign="center" >国家
                <input property="editor" class="mini-combobox" style="width:100%;" url="../data/countrys.txt"/>               
            </div>      
            <div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div>
        </div>
    </div>   

function onActionRenderer(e) {
            var grid = e.sender;
            var record = e.record;
            var uid = record._uid;
                        alert(uid)
            var rowIndex = e.rowIndex;

            var s = '<a class="New_Button" href="javascript:newRow()">New</a>'
                    + ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >Edit</a>'
                    + ' <a class="Delete_Button" href="javascript:delRow(\'' + uid + '\')">Delete</a>';

            if (grid.isEditingRow(record)) {
                s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">Update</a>'
                    + '<a class="Cancel_Button" href="javascript:cancelRow(\'' + uid + '\')">Cancel</a>'
            }
            return s;
        }

不明白这个uid 是哪来的。

举报

factory

Rank: 8Rank: 8
沙发
发表于 2014-6-9 09:51:49 |只看该作者
下划线的uid是我们内部创建的,我们内部的一些处理需要用到他

所有带下划线的都是内部创建的

举报

wansgibo

Rank: 3Rank: 3
板凳
发表于 2014-6-9 09:56:09 |只看该作者
factory 发表于 2014-6-9 09:51
下划线的uid是我们内部创建的,我们内部的一些处理需要用到他

所有带下划线的都是内部创建的 ...

哦。。那意思就是必须写的？

举报

factory

Rank: 8Rank: 8
地板
发表于 2014-6-9 10:19:44 |只看该作者
wansgibo 发表于 2014-6-9 09:56
哦。。那意思就是必须写的？

不一定,取出这个uid只是为了当你点击某一行的renderer绘制出来的a标签的时候,获得对应的行对象
你也可以用你们自己的数据id,
比如一条数据内有个唯一标识符, 给表格设置 idField="你这个唯一标识符",默认idField="id"的

var id = record.id

下面javascript:editRow(\'' + id + '\')" >Edit</a>'

这样当你点击a标签的时候通过  var row = grid.getRow(id)也能获取到行对象

例子中是 var row = grid.getRowByUID(_uid); 所以用到了_uid

2个获取行对象的不同的方法getRow()和getRowByUID()

举报

wansgibo

Rank: 3Rank: 3
5#
发表于 2014-6-9 13:53:29 |只看该作者
本帖最后由 wansgibo 于 2014-6-9 14:06 编辑
factory 发表于 2014-6-9 10:19
不一定,取出这个uid只是为了当你点击某一行的renderer绘制出来的a标签的时候,获得对应的行对象
你也可以 ...

function onActionRenderer(e) {
            var LQdatagrid = e.sender;
                        var SNdatagrid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;
                        //编辑行操作
            var s = ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >Edit</a>'
            if (LQdatagrid.isEditingRow(record)||SNdatagrid.isEditingRow(record)) {
                s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">Update</a>'
            }
            return s;
        }

这个我怎么能让他走不同的 <a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">Update</a> 我一个页面有好几个表格 用TAb控件给包起来的。但我现在想让他们走不同的更新方法

举报

felt

Rank: 8Rank: 8
6#
发表于 2014-6-9 14:47:40 |只看该作者
wansgibo 发表于 2014-6-9 13:53
function onActionRenderer(e) {
            var LQdatagrid = e.sender;
                        var S ...

那你拼接不同的方法啊

举报

wansgibo

Rank: 3Rank: 3
7#
发表于 2014-6-9 14:50:59 |只看该作者
felt 发表于 2014-6-9 14:47
那你拼接不同的方法啊

什么意思，，麻烦您给我简单的写个用力可以吗

举报

felt

Rank: 8Rank: 8
8#
发表于 2014-6-9 14:54:12 |只看该作者
wansgibo 发表于 2014-6-9 14:50
什么意思，，麻烦您给我简单的写个用力可以吗

var s = ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >Edit</a>'
这里拼接的点击方法，你要不同的表格不同的方法就拼不一样的方法啊

举报

wansgibo

Rank: 3Rank: 3
9#
发表于 2014-6-9 14:59:20 |只看该作者
felt 发表于 2014-6-9 14:54
var s = ' Edit'
这里拼接的点击方法，你要不同的表格不同的方法就拼不一样的方法啊 ...


  我是这个效果。但现在是多个tab 走一个update  给你看下我的代码

   <script type="text/javascript">
        mini.parse();
        //沥青路面
        var LQdatagrid = mini.get("LQdatagrid");
                //水泥路面
                var SNdatagrid = mini.get("SNdatagrid");
                //路基
                var YXSSdatagrid = mini.get("YXSSdatagrid");
                //构造物
                var GZWdatagrid = mini.get("GZWdatagrid");
                //沿线设施
                var YXSSdatagrid = mini.get("YXSSdatagrid");
               
        LQdatagrid.load(); SNdatagrid.load(); YXSSdatagrid.load(); GZWdatagrid.load(); YXSSdatagrid.load();

        function onActionRenderer(e) {
            var LQdatagrid = e.sender;
                        var SNdatagrid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;
                        //编辑行操作
            var s = ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >Edit</a>'
            if (LQdatagrid.isEditingRow(record)) {
                s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">Update</a>'
            } if(SNdatagrid.isEditingRow(record)){
                                 s = '<a class="Update_Button" href="javascript:update(\'' + uid + '\')">123</a>'
                        }
            return s;
        }

        function editRow(row_uid) {
            var LQrow = LQdatagrid.getRowByUID(row_uid);
                         var SNrow = SNdatagrid.getRowByUID(row_uid);
            if (LQrow||SNrow) {
                                //
                LQdatagrid.cancelEdit();
                LQdatagrid.beginEditRow(LQrow);
                               
                                //
                                SNdatagrid.cancelEdit();
                SNdatagrid.beginEditRow(SNrow);
            }
        }

        function updateRow(row_uid) {
            var row = LQdatagrid.getRowByUID(row_uid);
            LQdatagrid.commitEdit();
            var rowData = LQdatagrid.getChanges();
            //LQdatagrid.loading("保存中，请稍后......");
            var json = mini.encode(rowData);
               
            alert(json);
            $.ajax({
                url: "../data/AjaxService.aspx?method=SaveEmployees",
                data: { data: json },
                success: function (text) {
                    LQdatagrid.reload();
                                       
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });

        }
               
                //==============================
                  function update(row_uid) {
            var row = SNdatagrid.getRowByUID(row_uid);
            SNdatagrid.commitEdit();
            var rowData = SNdatagrid.getChanges();
            //LQdatagrid.loading("保存中，请稍后......");
            var json = mini.encode(rowData);
               
            alert(json);
            $.ajax({
                url: "../data/AjaxService.aspx?method=SaveEmployees",
                data: { data: json },
                success: function (text) {
                    SNdatagrid.reload();
                                       
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });

        }
    </script>

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

felt

Rank: 8Rank: 8
10#
发表于 2014-6-9 15:53:33 |只看该作者
wansgibo 发表于 2014-6-9 14:59
我是这个效果。但现在是多个tab 走一个update  给你看下我的代码

   

请分开写方法

举报

12下一页
返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-11-17 04:27 , Processed in 1.069928 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部