Implement interaction with the web page with TDC components

xiaoxiao2021-03-06  84

【Abstract】 TDC is a component provided by Internet Explorer 4.0 and above. It is dynamically controlled to data in the local machine with a buffer mechanism in Internet Explorer 4.0 and above. If the TDC data is bound to the HTML element of the web page, you can do not rely on server-side processing logic, CGI and other server-side processing logic, implement the dynamic interaction of the user and the page, reduce the dependence of the server on the server, reduce the server's pressure and mitigate the network crowding .

[Keyword] data binding TDC dynamic page

Dynamic webpage generally implemented through the user's interaction operation, the user issues a request to the server, the server uses the information submitted by the server using ASP, CGI, etc., and returns the result to the user after processing, and this way requires the server to provide the server And the authority of the server execute program, and the other side is very dependent on the server, which will increase the burden of the server and the degree of network crowding. Internet Explorer 4.0 and later can access a qualifier text file with data binding and table data control TDC (Tabular Data Control), display data as template with HTML files, and buffered to locally The text file operation, which implements the dynamic interaction of the client and the data driver page.

One. Data binding technology

Data Binding is consisting of four parts-component-data source objects, Data Consumer, Binding Agents, and list (display) agents. Data source object provides data transfer, operation, and ability to access data through script; data references generally refer to web page elements, it defines how data is displayed; binding agent is used for data identification and maintenance; list (display) agent for guarantee list The correct reference of the data.

two. TDC components

TDC is the built-in data source control provided by Internet Explorer, providing access to the ability to deliver a delimiter text file, with properties such as Datasrc, FieldDelim, TextQuqlifier, RowDelim, Sort, Filter, and UseHeader, and the ID of the TDC object. RecordSet. {Properties | Method}, access to the properties and methods of the corresponding Recordset set.

Delicious text file

Table is generally related to the database, and a line in a delimiter text file is equivalent to a record of the database, and the string from the desired in each row is equivalent to the fields in the record. There are three delimiters in the text file referenced by the TDC: text qualifiers, field qualifiers, and row qualifiers. Suppose text files Software.txt is as follows:

Name, Description, Type, Company, LOCATION

'IE5.0', 'Microsoft Internet Explorer 5.0', 'Browser', 'Microsoft', 'TIE50.ZIP'

'Fp98', 'Microsoft FrontPage 98', 'Editor', 'Microsoft', 'FP98.ZIP'

The first behavior field name, second, three behavior two records. Wherein, single quotes (') are text qualifiers, comma (,) is field qualifiers.

Quote TDC components in the web page

Establish an instance of TDC objects with ... statement in the head or main body in the web page, such as

>

Where the ID specifies a name to specify a name in order to reference, parameter textqualifer definition text qualifiers, parameter fielddelim definition field qualifiers, parameter data, specify TDC read data text file, parameter USEHEADER's TURE and FALSE specified Does a field name definition in a text file.

Bind the data to the Table element

Table is an HTML element that can make a multi-value bound, ... corresponds to a record, ... corresponding to a field, in these two element pairs, can use singular values Binding element reference data, displays the specific data content on the page. Such as:

Name

software introduction

......

Download Address

......

Download

In the above statement, the DataSRC, DataFLD, and DataFormats, DataPagesiae properties of the data reference components are utilized, and the data content of the text file is bound to the HRML element via the ID attribute, and the TDC control will automatically display the data content that meets the requirements in the page.

three. Data Sort, Filter, Reset, and Recordset Set

Data Sort by setting the sorting condition and use the RESET method, in order of order or descending order, " " in front of the field is arranged in ascending order, "-" is arranged in descending order. Filtering a subset of all records through the Reset method through a query condition, and the data displayed in the table is within the subset range. Such as:

Software.sort = " name"

Software.reset

Single-sede parameters to the entire record according to field Name

Software.sort = " Type, -company"

Software.reset

Several sequencing of field Type and COMPANY descending order.

Software.filter = "type = browser" Software.Reset

Generate a subset that contains only a browser.

Software.Filter = "Type <> Browser & Company = Microsoft"

Software.reset

Generate the subset of the SingleSer is not a browser (Browser) and the company's entire recordset of Microsoft.

Recordset property

The Recordset has the following properties and methods:

Recordset. {MoveFirst | MoveLast | MOVENEXT | MOVEPREVIOS}

The mobile record pointer refers to the first, last one, the next, the last record.

Recordset. {AbsolutionPage | PageCount | Pagesize}

Returns the current page number, the total number of pages, records per page.

Recordset. {recordcount | AbsolutePosition}

Returns a recordset to record the number, the current record number.

RECORDSET. {EOF | BOF}

Return to whether it has arrived, the first record.

In the web page, use the DatasRCID.Recordset. {Properties | Method} to operate the entire recordset. Such as:

Software.recordset.movenext

You can move the record in the above example points down one record.

four. A interactive page instance for software queries

In this example, the user can select the segment field by two drop-down vegetables, and filter the entire database according to a certain software name.

software query </ title></p> <p><Object ID = Software ClassID = CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83></p> <p><Param name = "textqualifier" value = "'"></p> <p><Param name = "Fielddelim" Value = ",">></p> <p><Param name = "dataURL" value = "software.txt"></p> <p><Param name = "userader" value = "true"></p> <p></ Object></p> <p></ HEAD></p> <p><Body></p> <p><B> sort by: </ b></p> <p><Select οnchange = "Software.sort = (' ' this.value); Software.Reset ()></p> <p><Option value = "" SELECTED> NONE </ option></p> <p><Option value = "name"> Name </ option></p> <p><Option value = "type"> type </ option></p> <p><Option value = "Company"> Company </ option></p> <p></ Select></p> <p><B> filter by: </ b></p> <p><Select οnchange = "software.filter = ('name =' this.value); Software.Reset ()> <option</p> <p>Value = "" SELECTED> NONE </ OPTION></p> <p><Option value = "IE5.0"> IE5.0 </ option></p> <p><Option value = "fp98"> fp98 </ option> </ select></p> <p><Table datasrc = # Software Cellspacing = 0 border = 1></p> <p><THEAD></p> <p><Tr></p> <p><TD> <b> Name </ b> </ td></p> <p><TD> <B> Description </ b> </ td></p> <p><TD> <b> type </ b> </ td></p> <p><TD> <B> Company </ b> </ td></p> <p><TD> <b> Download </ b> </ td></p> <p></ TR></p> <p></ THEAD></p> <p><TBODY></p> <p><Tr></p> <p><TD> <span datafld = name> </ span> </ td></p> <p><TD> <span datafld = description> </ span> </ td></p> <p><TD> <span datafld = type> </ span> </ td></p> <p><TD> <span datafld = company> </ span> </ td></p> <p><TD> <A DataFld=Location> Download </a> </ td></p> <p></ TR></p> <p></ Tbody></p> <p></ Table></p> <p></ Body></p> <p></ Html></p> <p>Fives. in conclusion</p> <p>Data Binding and TDC Controls provide us from the server-side method and tools for processing logic support, implement dynamic web pages, combined with a large number of new technologies, new methods and controls provided by DHTML, can perform TDC controls and web page elements More more accurate control, using the methods described above, implement dynamic webpage effects on small numbers in queries or personal sites.</p> <p>Like Applet, any Object must have parameters, TDC has approximately eight parameters, here I don't want to introduce one, I only introduce 5 important parameters:</p> <p>1, DataURL: You want to read the path of the text, for example: c: /data.txt</p> <p>2, Useheader: Get the column name of the data to output in the first line of the file</p> <p>3, TextQualifier: Determine a specific symbol surrounded by your data, for example ~ zhaoweiwei ~, here is "~" as this symbol</p> <p>4, FieldDelim: Symbols for dividing two adjacent data in a row</p> <p>5, Rowdelim: Determine a sign has been completed, the default value is: Return</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-124031.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="124031" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.040</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '51hUrZiwZZLvSMd8UKrorQWv7wfZDF3OPm6YmyqHy_2FrAVqezgN9uBWXBatBaklOjtScZUCuINgaSoqsZl646cA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>