关于Datagrid的代码:
<div id="datagridToolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a> <div> Date From: <input class="easyui-datebox" style="width:80px"> To: <input class="easyui-datebox" style="width:80px"> Language: <select class="easyui-combobox" panelHeight="auto" style="width:100px"> <option value="java">Java</option> <option value="c">C</option> <option value="basic">Basic</option> <option value="perl">Perl</option> <option value="python">Python</option> </select> <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a> </div> </div> <table id="datagridDemo"></table> <script> $('#datagridDemo').datagrid({ fitColumns:true, toolbar:'#datagridToolbar', pagination:true, rownumbers:true, singleSelect:true, scrollbarSize:0, striped:true, method:'get', pagePosition:'both', pageSize:10, pageList:[5,10,15,20,25], url:'datagrid_data.json', onClickRow: onClickRow,//双击时 //onClickCell:onClickCell,//点击时 remoteSort:false,//定义是否从服务器排序数据。 //multiSort:true,//定义是否启用多列排序 columns:[[ // {field:'ck',checkbox:true}, {field:'itemid',title:'Item ID',width:80,sortable:true,rowspan:2,editor:{type:'textbox',options:{required:true}}}, {field:'productid',title:'Product ID',width:120,sortable:true,rowspan:2, editor:{ type:'combobox', options:{ valueField:'productid', textField:'productname', method:'get', url:'products.json', required:true }}}, {title:'Item Details',colspan:4} ],[ {field:'listprice',title:'List Price',width:80,align:'right',sortable:true,formatter:formatPrice,editor:{type:'numberbox',options:{precision:1}}}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'}, {field:'attr1',title:'Attribute',width:250,editor:'textbox'}, {field:'status',title:'Status',width:60,align:'center',align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}} ]], rowStyler: function(index,row){ if (row.price>80){ return 'background-color:#6293BB;color:#fff;'; // return inline style // the function can return predefined css class and inline style // return {class:'r1', style:{'color:#fff'}}; } } }); function formatPrice(val,row){ if (val < 30){ return '
('+val+')
'; } else { return val; } } var pager = $('#datagridDemo').datagrid('getPager'); // get the pager of datagrid pager.pagination({ buttons:[{ iconCls:'icon-search', handler:function(){ alert('search'); } },{ iconCls:'icon-add', handler:function(){ alert('add'); } },{ iconCls:'icon-edit', handler:function(){ alert('edit'); } }] }); var editIndex = undefined; function endEditing(){ //editIndex==undefined时 if (editIndex == undefined){return true} //当editIndex==index时就要验证下他的内容 if ($('#datagridDemo').datagrid('validateRow', editIndex)){ // var ed = $('#datagridDemo').datagrid('getEditor', {index:editIndex,field:'productid'}); // var productname = $(ed.target).combobox('getText'); // $('#datagridDemo').datagrid('getRows')[editIndex]['productname'] = productname; $('#datagridDemo').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index){ //editIndex=undefined if (endEditing()){//验证成功后或者editIndex==undefined //获取选中的那一行并开始编辑 $('#datagridDemo').datagrid('selectRow', index) .datagrid('beginEdit', index); //把索引赋值给editIndex editIndex = index; } else { //没有验证通过就选中编辑行 $('#datagridDemo').datagrid('selectRow', editIndex); } } function append(){ if (endEditing()){ //添加一行内容 $('#datagridDemo').datagrid('appendRow',{status:'P',attr1:'重新添加的attr'}); //把添加的那一行索引赋值给editIndex editIndex = $('#datagridDemo').datagrid('getRows').length-1; //选中这行并开始编辑 $('#datagridDemo').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } } function removeit(){ //如果editIndex==undefined就不执行 if (editIndex == undefined){return} $('#datagridDemo').datagrid('cancelEdit', editIndex) .datagrid('deleteRow', editIndex); //相当于$('#datagridDemo').datagrid('deleteRow', editIndex); editIndex = undefined; } function accept(){ if (endEditing()){ //提交自从被加载以来或最后一次调用 acceptChanges 以来所有更改的数据。 $('#datagridDemo').datagrid('acceptChanges'); } } function reject(){ //回滚自从创建以来或最后一次调用 acceptChanges 以来所有更改的数据。 $('#datagridDemo').datagrid('rejectChanges'); editIndex = undefined; } function getChanges(){ //获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。当 type 参数没有分配时,返回所有改变的行。 var rows = $('#datagridDemo').datagrid('getChanges'); alert(rows.length+' rows are changed!'); } // $.extend($.fn.datagrid.methods, { // editCell : function(jq, param) { // return jq.each(function() { // var opts = $(this).datagrid('options'); // var fields = $(this).datagrid('getColumnFields', true).concat( // $(this).datagrid('getColumnFields')); // for ( var i = 0; i < fields.length; i++) { // var col = $(this).datagrid('getColumnOption', fields[i]); // col.editor1 = col.editor; // if (fields[i] != param.field) { // col.editor = null; // } // } // $(this).datagrid('beginEdit', param.index); // for ( var i = 0; i < fields.length; i++) { // var col = $(this).datagrid('getColumnOption', fields[i]); // col.editor = col.editor1; // } // }); // } // }); // var editIndex = undefined; // //结束编辑 // function endEditing() { // if (editIndex == undefined) { // return true // } // if ($('#datagridDemo').datagrid('validateRow', editIndex)) { // $('#datagridDemo').datagrid('endEdit', editIndex); // editIndex = undefined; // return true; // } else { // return false; // } // } // //单击单元格 // function onClickCell(index, field) { // if (endEditing()) { // $('#datagridDemo').datagrid('selectRow', index).datagrid('editCell', { // index : index, // field : field // }); // editIndex = index; // } // } </script>
渲染