<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>Extend editors for DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> </head> <body> <Script> $(function(){ }) </Script> <h2>Extend editors for DataGrid</h2> <div class="demo-info"> <div class="demo-tip icon-tip"> </div> <div>Click the edit button on the right side of row to start editing with numberspinner editor for unit cost field.</div> </div> <div id="dd"> <input type="hidden" id="ddData" /> </div> <div id="pg"></div> <script type="text/javascript"> function formatAction(value,row,index){ if (row.editing){ var s = '<a href="#" onclick="saverow(this)">Save</a> '; var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>'; return s+c; } else { var e = '<a href="#" onclick="editrow(this)">Edit</a> '; var d = '<a href="#" onclick="deleterow(this)">Delete</a>'; return e+d; } } </script> <script> $.extend($.fn.datagrid.defaults.editors, { numberspinner: { init: function(container, options){ var input = $('<input type="text">').appendTo(container); return input.numberspinner(options); }, destroy: function(target){ $(target).numberspinner('destroy'); }, getValue: function(target){ return $(target).numberspinner('getValue'); }, setValue: function(target, value){ $(target).numberspinner('setValue',value); }, resize: function(target, width){ $(target).numberspinner('resize',width); } } }); $.extend($.fn.datagrid.defaults.editors, { item: { init: function(container, options){ var input = $('<input type="text">').appendTo(container); return input.numberspinner(options); }, destroy: function(target){ $(target).numberspinner('destroy'); }, getValue: function(target){ return $(target).numberspinner('getValue'); }, setValue: function(target, value){ $(target).numberspinner('setValue',value); }, resize: function(target, width){ $(target).numberspinner('resize',width); } } }); $.extend($.fn.datagrid.defaults.editors, { checkboxList: { init: function (container, options) { //console.log(container) var obj = Object.assign({}, options); $(container).empty(); var editor = $('<input type="text"/>').appendTo(container); obj.readonly=true; obj.editable = false; obj.value=""; editor.textbox(obj); container.mouseover(function () { $('#dd').dialog('open'); $('#dd').find("input").focus(); }); //container.click(); return editor; }, getValue: function (target) { return $(target).textbox('getValue', $(target).val()); }, setValue: function (target, value) { console.log(typeof value) var obj ; if(typeof value =="string"){obj = value} else {obj = JSON.stringify(value)} if (value) $(target).textbox('setValue', obj); else $(target).textbox('setValue', ''); }, resize: function (target, width) { $(target).textbox('resize', width); }, destroy: function (target) { console.log(target) $(target).textbox('destroy'); } }}) $(function(){ $('#dd').dialog({ title: '弹窗', 550, height: 'auto', closed: true, cache: false, modal: true, buttons: [{ text: '保存', handler: function () { var row = $("#pg").propertygrid("getSelected"); var rowIndex = $("#pg").propertygrid("getRowIndex",row); var index = currentRowIndex; $("#pg").propertygrid("beginEdit",index); var cellEditor = $('#pg').propertygrid('getEditor', { index: index, field: 'value' }); var data =new Array(); $("table.dataList").find("tr").each(function (i,n) { var obj = {}; obj.name=$(this).find("input:first").val(); obj.value=$(this).find("input:last").val() data.push(obj); }) //$("#ddData").val(data); console.log(data); //var data = {va:"sdsd",vaa:"xxx"}; cellEditor.actions.setValue(cellEditor.target,data ); $("#pg").propertygrid("endEdit",index); $('#dd').dialog('close'); } }, { text: '取消', handler: function () { $('#dd').dialog('close'); } }], onBeforeOpen:function(){ var row = $("#pg").propertygrid("getSelected"); var data = (typeof row.value=="string")?$.parseJSON(row.value):row.value; var editor = (row.editor==undefined)?row.editor.type:row.editor; if(editor=="checkboxList"){ var div= $('<table class="dataList"></table>'); var addNew = function(){ var item= $('<tr><td><label>Key:</label><input value=""/ ></td><td><label>Value:</label><input value=""/ ></td><td></td></tr>'); var addBtn= $('<a></a>').linkbutton({text:"添加",iconCls:"icon-add"}).on('click',function () { var tr =addNew(); tr.appendTo(div); return; }); var removeBtn= $('<a></a>').linkbutton({text:"添加",iconCls:"icon-remove"}).on('click',function () { $(this).parents("tr").remove(); //return addNew(); }); item.find("td:last").append(addBtn).append(removeBtn); return item; console.log(item); } $.each(data,function(index,val){ var t= $('<tr><td><label>Key:</label><input value="'+val.name+'"/ ></td><td><label>Value:</label><input value="'+val.value+'"/ ></td><td></td></tr>'); // var btn1 = $.extend(true,{},addBtn); var addBtn= $('<a></a>').linkbutton({text:"添加",iconCls:"icon-add"}).on('click',function () { var tr =addNew(); tr.appendTo(div); return; }); var removeBtn= $('<a></a>').linkbutton({text:"添加",iconCls:"icon-remove"}).on('click',function () { $(this).parents("tr").remove(); //return addNew(); }); t.find("td:last").append(addBtn).append(removeBtn); t.appendTo(div); }) $(this).find('table.dataList').empty(); div.appendTo(this); } $(this).find('.addBtn').on('click',addItem) } }); $(this).find('.addBtn').on('click',addItem) var addItem = function (editor) { $('<a></a>') var t= $('<tr><td><label>Key:</label><input value=""/ ></td><td><label>Value:</label><input value=""/ >'+addBtn.html()+'</td></tr>').appendTo($(e.target().parent())); return false ;} var pgrows =[]; for(i =0;i<10;i++) { var pgrow = {name:"fff"+i,value:i,editor:{type:"text",options:{dlgId: 'dd', textId: 'txt', currField: 'f'}}} pgrows.push(pgrow) } var currentRowIndex = -1; var strValue = [{name:'男',value:'man'},{name:"女",value:'women'}]; var xrows = {name:"ListItems",value:strValue,editor:'checkboxList'} var xrows1 = {name:"222",value:[{name:1,value:2,audit:"xxx"},{name:2,value:3,audit:"yyyy"}],editor:'checkboxList'} var xrows3= {name:"222",value:[{name:1,value:2,audit:"xxx"},{name:2,value:3,audit:"yyyy"}],editor:"checkboxList"}; pgrows.push(xrows,xrows1,xrows3) var pgdata = {total:pgrows.length,rows:pgrows} $("#pg").propertygrid({ rownumbers:true, data:pgdata, showGroup: true, scrollbarSize: 0, onClickRow:function(rowIndex,rowData){ currentRowIndex = rowIndex; }, onSelect: function(rowIndex,rowData){ $(this).datagrid('beginEdit', rowIndex); }, columns:[[{field:"name",title:"属性名称",80},{field:"value",title:"属性值",90,formatter:function(value,row,index){ if(row.editor=="checkboxList"||row.editor.type=="checkboxList"){ return $('<a></a>').linkbutton({iconCls:'icon-search',text:'<em>点击查看/编辑</em>'}).html();} return value; }}]] }) }); $(function(){ $('#tb').textbox({ buttonText:'Edit/Read', iconCls:'icon-man', iconAlign:'left' , readonly:false, editable:false, 100 }); $("#getData").click(function(){ var data = $("#pg").propertygrid("getData"); console.log(data) alert(JSON.stringify(data)); $("#pg").propertygrid({data:data}); }) }) </script> <input id="tb" type="text" > <div id="getData">sdsdsd</div> </body> </html>