📄 test.htm
字号:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link href="component.css" rel="stylesheet" type="text/css">
<script src="grid.js"></script>
<script src="SigmaBase.js"></script>
<script>
var grid = null;
function editCell(event){
event.cell.setValue("部门xx");
}
function titleChanged(event){
//alert("new title is "+grid.getColumnOption(event.cell.column,event.cell.getValue()).name);
}
function onValueChanged(event){
alert(event.type+";"+event.cell.getValue());
}
function nameClicked(event){
alert(event.type);
}
function onDblClicked(event){
alert(event.type);
}
window.onload = function(){
grid = new SigmaGrid();
var columns = [
{name:"department",caption:"部门",width:200,mode:"string"},
{name:"user.name",caption:"姓名",mode:"link",width:60,href:"nameClicked"},
{name:"user.sex",caption:"性别",width:60,mode:"string"},
{name:"user.title",caption:"岗位",mode:"select",width:100,
options:[
{id:"1",name:"程序员"},
{id:"2",name:"部门经理"},
{id:"3",name:"技术总监"}]
},
{name:"user.birthday",caption:"出生日期",width:100,mode:"date"},
{name:"user.married",caption:"已婚",width:40,mode:"check"},
{name:"user.salary",caption:"月薪",mode:"money",width:100}
];
var data = [
{department:"开发部",user:{id:1,name:"何晓东",sex:"男",birthday:"1977-4-14",salary:4000,title:"1",married:true}},
{department:"开发部",user:{id:1,name:"朱红亮",sex:"男",birthday:"1977-4-14",salary:5000,title:"1",married:true}},
{department:"开发部",user:{id:1,name:"阿毛",sex:"女",birthday:"1977-4-14",salary:9000,title:"1",married:true}},
{department:"开发部",user:{id:1,name:"阿龙",sex:"女",birthday:"1977-4-14",salary:6000,title:"1",married:true}},
{department:"开发部",user:{id:1,name:"阿狗",sex:"女",birthday:"1977-4-14",salary:8000,title:"1",married:true}},
{department:"开发部",user:{id:1,name:"阿丽",sex:"女",birthday:"1977-4-14",salary:7000,title:"1",married:true}}
]
document.all("aa").appendChild(grid.getElement());
grid.setHeight(200);
grid.setWidth(500);
grid.setContext({
sequence:true,checkBox:true,readonly:false,sum:[{colName:"user.salary"}]
});
grid.setMenus([
{cmd:"oThis.addNewRow()",name:"新建"},
{cmd:"oThis.deleteSelectedRows()",name:"删除选中行"}
]);
grid.bindHeader(columns);
grid.bindData(data);
grid.onSelect = function(){
if(grid.getSelectedRows().length>0)
;//alert(grid.getSelectedRows()[0].value.user.id);16431514
}
grid.debugCanvas = document.all.info;
}
function getSelectedValue(){
var array = grid.getColumnValueOfSelectedRows("checkTest");
alert(toString(array));
}
function showSequence(){
var array = grid.getSelectedRows();
for(var i=0;i<array.length;i++){
var row = array[i];
alert(row.getSequence());
}
}
function deleteSelectedRows(){
grid.deleteSelectedRows();
}
function addRow(){
var data = {cols1:"newCols1",cols2:"50",cols3:false,cols4:"cols4thnew"};
grid.addRow(data);
}
function showInner(){
document.all("info").innerText = grid.getElement().outerHTML;
}
function readonly(){
grid.getContext().readonly = true;
}
function showString(){
alert(2);
alert(toString(grid.getValue()));
}
function removeMenus(){
grid.getMenus().removeAll();
}
function setColWidth(){
alert(grid.getColumnsInfo()[1].name);
grid.setColumnWidth(grid.getColumnsInfo()[1],200);
}
function src(){
document.all("info").innerText = "";
alert("cleared");
document.all("info").innerText = grid.getElement().outerHTML;
}
function sort(){
grid.sortByColumn("user.name");
}
</script>
</head>
<body>
<div id="info" style="border:1 solid blue;width:800;height:300;overflow:scroll;"></div><br>
<div id="aa" >
</div>
<br>
<button onclick = 'getSelectedValue()'>getSelectedValue</button>
<button onclick = 'deleteSelectedRows()'>deleteSelectedRows</button>
<button onclick = 'addRow()'>addRow</button>
<button onclick = 'showInner()'>showInner</button>
<button onclick = 'showSequence()'>序号</button>
<button onclick = 'showString()'>toString</button>
<button onclick = 'readonly()'>只读</button>
<button onclick = 'removeMenus()'>除去菜单</button>
<button onclick = 'setColWidth()'>列宽</button>
<button onclick = 'src()'>源代码</button>
<button onclick = 'document.all.info.innerText="";'>清除</button>
<button onclick = 'sort()'>按名称排序</button>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -