JavaScript DHTML/Development/Data Binding

Материал из Web эксперт
Версия от 07:19, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

"dataFld" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->



"dataFormatAs" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->



"dataPageSize" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->



"dataSrc" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING,income:INT
Joe,Smith,200387
Manny,LastName,195687
Tony,Belling,195006
-->



"fieldDelim" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!-- 
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->



Named Recordset

    
<html>
<head>
<script language="javascript">
function goFirst(){
   document.all.myTable.dataPageSize = 2;
   myTable.firstPage(); 
} 
function goPrevious(){
   document.all.myTable.dataPageSize = 2;
   myTable.previousPage(); 
}
function goNext(){
   document.all.myTable.dataPageSize = 2;
   myTable.nextPage(); 
}
function goLast(){
   document.all.myTable.dataPageSize = 2;
   myTable.lastPage(); } </script>
<body>
<button onclick="goFirst();">First Page</button>
<button onclick="goPrevious();">Previous Page</button>
<button onclick="goNext();">Next Page</button>
<button onclick="goLast();">Last Page</button>
<button onclick="alert(document.all.myData.namedRecordset(""));">Named recordset</ 
button>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<table id="myTable" datasrc="#myData">
    <thead>
        <tr style="font-weight:bold">
            <td>First</td>
            <td>Last</td>
        </tr>
    </thead>
<tbody>
<tr id="tableList">
   <td><span datafld="firstname"></span></td>
   <td><span datafld="lastname"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- myfile.csv-->
<!-- 
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->



"reason" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smit
Manny,LastName
Tony,Belling
-->



"recordNumber" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->



"recordset" Example

    
<html>
<head>
<script language="javascript">
function rowEnter(){
    myTable.rows[myData.recordset.AbsolutePosition].style.backgroundColor = "yellow";
}
function add(){
    myData.recordset.AddNew();
}
function del(){
    if (myData.recordset.RecordCount > 0) 
        myData.recordset.Delete();
}
</script>
<script for="myTable" event="onreadystatechange">
    if (this.readyState == "complete"){ 
        this.rows(myData.recordset.AbsolutePosition).style.backgroundColor = "yellow";
        myData.onrowenter = rowEnter;
    }
</script>
<script for="myData" event="onrowexit">
    for (var i = 1; i <= myData.recordset.RecordCount; i++){
        myTable.rows[i].style.backgroundColor = "";
    }
</script>
<script for="tableList" event="onclick">
    myData.recordset.AbsolutePosition = this.recordNumber;
    window.event.cancelBubble = true;
</script>
<script for="myData" event="oncellchange">
alert(event.dataFld);
</script>
</head>
<body>
<button onclick="add();">Add Record</button>
<button onclick="del();">Delete</button>
<button onclick="alert(firstname.dataFld);">dataFld</button>
<button onclick="alert(myDiv.dataFormatAs);">dataFormatAs</button>
<button onclick="alert(myTable.dataPageSize);">dataPage</button>
<button onclick="alert(myTable.dataSrc);">dataSrc</button>
<div datasrc="#myData" id="myDiv" dataformatas="text"></div>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<br>
<br>
First Name:&nbsp;<input id="firstname" type="text" datasrc="#myData" datafld="firstname"><br>
Last Name:&nbsp;<input id="lastname" type="text" datasrc="#myData" datafld="lastname"><br>
<table id="myTable" datasrc="#myData" datapagesize="10">
    <thead>
        <tr style="font-weight:bold">
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
    <tr id="tableList">
        <td><span datafld="firstname"></span></td>
        <td><span datafld="lastname"></span></td>
    </tr>
    </tbody>
</table>
</body>
</html>
<!--
Contents of myfile.csv:
firstname:STRING,lastname:STRING
Joe,Smith
Manny,LastName
Tony,Belling
-->
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Development/Data_Binding&oldid=1789»