 Show Posts
|
|
Pages: [1]
|
|
1
|
General Category / EasyUI for jQuery / Re: DataGrid in XHTML File
|
on: May 06, 2013, 09:13:43 PM
|
In line 6469 of jquery-1.9.1.js, it is: tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2]; I change it to: if(elem == " "){
tmp.innerHTML = " ";
}else{
tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];
}
It can work! anybody can give me a better solution? Thanks!!!  |
|
|
|
|
4
|
General Category / EasyUI for jQuery / DataGrid in XHTML File
|
on: May 06, 2013, 06:54:36 AM
|
Hello, The code is: testDataGridInXHTML.xhtml:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
<title>Title goes here</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").datagrid({
title : "test",
height : 199,
width : 788,
url:'datagrid_data.json',
columns:[[
//{field:"name",title:'le',width:150},
{field:"addr", title:'le', width:150}
]]
});
});
</script>
</head>
<body>
test
<table id="test" ></table>
</body>
</html> {
"total":239,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
{"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},
{"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"},
{"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},
{"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"},
{"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},
{"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},
{"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"},
{"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}
]
}In FireFox it goes wrong: SyntaxError: An invalid or illegal string was specified Why {field:"addr", title:'le', width:150} can work in .HTML, but cannot work in .XHTML? Please help me,Thanks!!! |
|
|
|
|
6
|
General Category / EasyUI for jQuery / Editable DataGrid with Calculated Column
|
on: August 08, 2012, 07:49:28 PM
|
Hello! Editable DataGrid with Calculated Column,when I beginEdit a row, the Calculated number is correct.But when I endedit that row, it would be wrong! Can you help me? Thanks! <!doctype html>
<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>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
$(function(){
var lastIndex;
$('#tt').datagrid({
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
setEditing(rowIndex);
}
lastIndex = rowIndex;
}
});
});
function setEditing(rowIndex){
var editors = $('#tt').datagrid('getEditors', rowIndex);
var priceEditor = editors[0];
var amountEditor = editors[1];
var costEditor = editors[2];
priceEditor.target.bind('change', function(){
calculate();
});
amountEditor.target.bind('change', function(){
calculate();
});
function calculate(){
setTimeout(function(){
var cost = priceEditor.target.val() * amountEditor.target.val();
costEditor.target.val(cost);
}, 100);
}
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<table id="tt" style="width:600px;height:auto"
title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"
idField="itemid" url="data/datagrid_data.json">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="amount" width="80" align="right" editor="{type:'numberbox',options:{precision:0}}">Amount</th>
<th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>
<th field="attr1" width="150" editor="text">Attribute</th>
<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
</body>
</html>
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
 --------------------------------------------------------------  |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: datagrid editor - combogrid
|
on: July 23, 2012, 09:48:03 PM
|
Thank you! <!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">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../jQuery-download/jquery-easyui-1.2.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jQuery-download/jquery-easyui-1.2.3/themes/icon.css">
<script type="text/javascript" src="../jQuery-download/jquery-easyui-1.2.3/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jQuery-download/jquery-easyui-1.2.3/jquery.easyui.min.js"></script>
<script>
var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
$(function(){
//Extend the 'combogrid' editor.
$.extend($.fn.datagrid.defaults.editors, {
combogrid: {
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function(target){
$(target).combogrid('destroy');
},
getValue: function(target){
return $(target).combogrid('getValue');
},
setValue: function(target, value){
$(target).combogrid('setValue', value);
},
resize: function(target, width){
$(target).combogrid('resize',width);
}
}
});
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:60},
{field:'productid',title:'Product',width:100,
formatter:function(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return value;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'name',
data:products,
required:true
}
}
},
{field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
{field:'attr1',title:'Attribute',width:150,editor:{
type : 'combogrid',
options : {
fit: true,
singleSelect: true,
editable : true,
idField:'portCode',
textField:'localName',
panelWidth:500,
columns:[[
{field:'portCode',title:'portCode',width:60},
{field:'nameEn',title:'nameEn',width:100},
{field:'localName',title:'localName',width:120}
]],
toolbar: '#tb'
}
}},
{field:'status',title:'Status',width:50,align:'center',
editor:{
type:'checkbox',
options:{
on: 'P',
off: ''
}
}
},
{field:'action',title:'Action',width:70,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';
var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';
var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';
return e+d;
}
}
}
]],
onBeforeEdit:function(index,row){
row.editing = true;
updateActions();
},
onAfterEdit:function(index,row){
row.editing = false;
updateActions();
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions();
},
onDblClickRow : function(rowIndex, rowData) {
$(this).datagrid('beginEdit', rowIndex);
}
});
});
function updateActions(){
var rowcount = $('#tt').datagrid('getRows').length;
for(var i=0; i<rowcount; i++){
$('#tt').datagrid('updateRow',{
index:i,
row:{action:''}
});
}
}
function editrow(index){
$('#tt').datagrid('beginEdit', index);
}
function deleterow(index){
$.messager.confirm('Confirm','Are you sure?',function(r){
if (r){
$('#tt').datagrid('deleteRow', index);
updateActions();
}
});
}
function saverow(index){
$('#tt').datagrid('endEdit', index);
}
function cancelrow(index){
$('#tt').datagrid('cancelEdit', index);
}
function insert(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row:{
status:'P'
}
});
$('#tt').datagrid('selectRow',index);
$('#tt').datagrid('beginEdit',index);
}
</script>
</head>
<body>
<h1>Editable DataGrid</h1>
<div style="margin-bottom:10px">
<a href="#" onclick="insert()">Insert Row</a>
</div>
<table id="tt"></table>
<div id="tb" style="padding:3px;display:none">
<span>Item ID:</span>
<input id="itemid" style="line-height:26px;border:1px solid #ccc">
<span>Product ID:</span>
<input id="productid" style="line-height:26px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
</div>
</body>
</html>
datagrid_data.json
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
DataGrid - Attribute - combogrid - Item ID (input): In IE, the Item ID input can work, but in firefox, it can't work.(In the "Item ID" text input box, I can't input anything, as shown in the picture below..) Can you help me? Thank you! |
|
|
|
|
