当前位置: 首页 > 工具软件 > Liger UI > 使用案例 >

ligerui demo php,ligerui grid行编辑示例

洪博艺
2023-12-01

ligerui grid行编辑示例,具备新增行、删除行功能,可在修改某个cell之后,如果录入错误,可以提醒用户。

String path = request.getContextPath();

%>

ZTREE DEMO - Simple Data

var contextpath = "";

.myul li{float:left;width:100px;display:inline;}

var manager, g;

$(document).ready(function(){

$("#leafOpt").click(function(){

$("#urlDom").show();

});

$("#dirOpt").click(function(){

$("#urlDom").hide();

});

//初始化grid

function itemclick(item)

{

alert(item.text);

}

var typeData = [{ val: 'url', text: 'URL' }, { val: 'btn', text: '按钮'}, { val: 'code', text: '分级编码'}];

var rowData = { Rows: []};

g = manager = $("#maingrid").ligerGrid({

columns: [

{ display: '名称', name: 'name', align: 'left', width: 120,editor: { type: 'text' } } ,

{ display: '类型', width: 60, name: 'type',

editor: { type: 'select', data: typeData, valueColumnName: 'val' },

render: function (item)

{

for (var i = 0; i < typeData.length; i++)

{

if (typeData[i]['val'] == item.type)

return typeData[i]['text']

}

}

},

{ display: '值', name: 'value', width: 360, align: 'left',editor: { type: 'text' } }

], sortName: 'name',enabledEdit: true, data: rowData,

onSelectRow: function (rowdata, rowindex)

{

$("#txtrowindex").val(rowindex);

},

onBeforeEdit: onBeforeEdit, onBeforeSubmitEdit: onBeforeSubmitEdit,onAfterEdit: onAfterEdit,

width: '98%', height: '350', usePager: false, clickToEdit: true, checkbox: true

});

});

function deleteRow()

{

g.deleteSelectedRow();

}

function addNewRow()

{

g.addRow({

id : 0,

name:'',

type:'url',

value:''

});

}

//设置name前缀

function onBeforeEdit(e)

{

var data = manager.getData();

return true;

}

//限制年龄

function onBeforeSubmitEdit(e)

{

if (e.columnname == "Age")

{

if (e.value < 20 || e.value > 30) return false;

}

return true;

}

//编辑后事件

function onAfterEdit(e)

{

//当切换类型时,自动填充名称前缀

//alert(JSON.stringify(e.record));

//alert("after, e.column: "+JSON.stringify(e.column));

if(e.column.name=="type") {

var data = manager.getData();

var d = data[e.rowindex];

var name = '';

if(d.type=="url")

name="url";

else if(d.type=="code")

name="code_";

else if(d.type=="btn")

name="btn_";

g.updateCell('name', name, e.record);

}

//当名称修改后,校验前缀是否与类型匹配

if (e.column.name == "name")

{

var d = e.record;

var cellObj = g.getCellObj(d, e.column);

//var name = d[e.column.name];

var name = $(cellObj).text();

if(name.length<1)

return true;

if(d.type=="url" && name.indexOf(d.type)!=0) {

alert('你刚才编辑的值录入不正确!(类型为URL时,名称必须以url开头(小写))');

//cellObj.focus();

//g.setCellEditing(d, e.column, editing);

return false;

} else if(d.type=="code" && name.indexOf(d.type)!=0) {

alert('你刚才编辑的值录入不正确!(类型为分级编码时,名称必须以code_开头(小写))');

//g.setCellEditing(d, e.column, editing);

return false;

} else if(d.type=="url" && name.indexOf(d.type)!=0) {

alert('你刚才编辑的值录入不正确!(类型为按钮时,名称必须以btn_开头(小写))');

//g.setCellEditing(d, e.column, editing);

return false;

}

}

return true;

}

目录节点

叶子节点

节点名称
叶子url
分级编码
 类似资料: