你的位置:首页 > Java教程

[Java教程]EasyUI datagrid 行编辑


一、HTML:

<div class="info">  <div class="info_tt">    <span class="info_tt1">明细</span> <span class="pucker2"></span><a class="del" onclick="detailDel()"      href="javascript:void(0)">删除</a> <a class="sure" onclick="detailOK()" href="javascript:void(0)">        确认</a> <a class="add" onclick="detailAdd()" href="javascript:void(0)">添加</a>  </div>  <div>    <table id="detailList">    </table>  </div></div>

View Code

二、JS:

<script type="text/javascript">  $(function () {    //使用JavaScript创建数据表格    $('#detailList').datagrid({      url: '/PMP/EntryNoticeManage/GetDetailList',   //一个用以从远程站点请求数据的超链接地址。控制器/方法      queryParams: {        type: 1,        entryNoticeId: 0,        proTaskId: 0      },      iconCls: 'icon-save',      loadMsg: '数据正在加载中,请稍后.....',  //当从远程站点载入数据时,显示的一条快捷信息。      singleSelect: true,        //设置为true将只允许选择一行      fitColumns: true,         //设置为true将自动使列适应表格宽度以防止出现水平滚动      striped: true,           //设置为true将交替显示行背景      pagination: false,         //设置true将在数据表格底部显示分页工具栏。      rownumbers: true,         //设置为true将显示行数。      pagePosition: 'bottom',      //定义的分页栏的位置。可用的值有 'top','bottom','both'。      sortName: 'creatTime',          //当数据表格初始化时以哪一列来排序。      sortOrder: 'desc',         //定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。      idField: 'Id',           //表明该列是一个唯一列。      onClickRow: detailClickRow,      frozenColumns: [[         //跟列属性一样,但是这些列固定在左边,不会滚动。              ]],      columns: [[             { field: 'Id', title: 'ID', hidden: true },             { field: 'ProtastDetId', title: 'ProtastDetId', hidden: true },             { field: 'WorkContent', title: '工作内容', width: 100, align: 'center', sortable: true,               editor: { type: 'textbox', options: { validType: 'length[1,50]', required: true} }             },             { field: 'Remarks', title: '备注', width: 100, align: 'center', sortable: true,               editor: { type: 'textbox', options: { validType: 'length[0,500]'} }             }           ]]    }); //end datagrid    loadgrid(1, "@entryNotice.Id", 0);  });  //明细编辑行索引  var detailEditIndex = undefined;  //明细结束编辑  function detailEndEdit() {    if (detailEditIndex == undefined) { return true }    if ($('#detailList').datagrid('validateRow', detailEditIndex)) {      $('#detailList').datagrid('endEdit', detailEditIndex);      detailEditIndex = undefined;      return true;    } else {      return false;    }  }  //明细点击行  function detailClickRow(index) {    if (detailEditIndex != index) {      if (detailEndEdit()) {        $('#detailList').datagrid('selectRow', index)                .datagrid('beginEdit', index);        detailEditIndex = index;      } else {        $('#detailList').datagrid('selectRow', detailEditIndex);      }    }  }  //添加行  function detailAdd() {    if (detailEndEdit()) {      $('#detailList').datagrid('appendRow', {});      detailEditIndex = $('#detailList').datagrid('getRows').length - 1;      $('#detailList').datagrid('selectRow', detailEditIndex)              .datagrid('beginEdit', detailEditIndex);    }  }  //删除行  function detailDel() {    if (detailEditIndex == undefined) { return }    $('#detailList').datagrid('cancelEdit', detailEditIndex)            .datagrid('deleteRow', detailEditIndex);    detailEditIndex = undefined;  }  //临时保存  function detailOK() {    if (detailEndEdit()) {      $('#detailList').datagrid('acceptChanges');    }  }  //重新查询,显示第一页  function loadgrid(type, entryNoticeId, proTaskId) {    $('#detailList').datagrid('load', {      type: type,      entryNoticeId: entryNoticeId,      proTaskId: proTaskId    });    $('#detailList').datagrid('clearSelections');  }</script>

View Code