jQuery MiniUI

标题: 表格行内编辑 [打印本页]

作者: wansgibo 时间: 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>
         
         <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>
         
         <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 时间: 2014-6-9 09:51:49

下划线的uid是我们内部创建的,我们内部的一些处理需要用到他

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

作者: wansgibo 时间: 2014-6-9 09:56:09

factory 发表于 2014-6-9 09:51
下划线的uid是我们内部创建的,我们内部的一些处理需要用到他

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

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

作者: factory 时间: 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 时间: 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 时间: 2014-6-9 14:47:40

wansgibo 发表于 2014-6-9 13:53
function onActionRenderer(e) {
var LQdatagrid = e.sender;
var S ...

那你拼接不同的方法啊

作者: wansgibo 时间: 2014-6-9 14:50:59

felt 发表于 2014-6-9 14:47
那你拼接不同的方法啊

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

作者: felt 时间: 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 时间: 2014-6-9 14:59:20

felt 发表于 2014-6-9 14:54
var s = ' Edit'
这里拼接的点击方法，你要不同的表格不同的方法就拼不一样的方法啊 ...

[attach]4640[/attach]
  我是这个效果。但现在是多个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 时间: 2014-6-9 15:53:33

wansgibo 发表于 2014-6-9 14:59
我是这个效果。但现在是多个tab 走一个update 给你看下我的代码

请分开写方法

作者: wansgibo 时间: 2014-6-9 15:55:14

felt 发表于 2014-6-9 15:53
请分开写方法

这个我不太懂。你能不能简单给我写下小例子我参考下。

作者: felt 时间: 2014-6-9 15:59:14

wansgibo 发表于 2014-6-9 15:55
这个我不太懂。你能不能简单给我写下小例子我参考下。

不同的表格，分开写不同的renderer方法，updateRow方法

作者: wansgibo 时间: 2014-6-9 16:03:10

felt 发表于 2014-6-9 15:59
不同的表格，分开写不同的renderer方法，updateRow方法

谢谢老师有点思路了。一下午钻死胡同里面了

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)