DDR爱好者之家

Ext JS动态加载JavaScript创建窗体的方法
站长资源 2024/11/29 佚名
8 1538
DDR爱好者之家 Design By 杰米

JavaScript不需要编译即可运行，这让JavaScript构建的应用程序可以变得很灵活。我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互。下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体。
 1 项目结构：
 项目结构如下：其中GetJSUI一般处理程序用来从数据库表中抓取UI配置，并返回到客户端；Contents文件夹下用HTML文件和JS库等。 

Ext JS动态加载JavaScript创建窗体的方法

2 数据库表结构
可以用下面的SQL在MSSQL中创建表，其中JavaScriptContent字段存储具体的JS脚本。 

CREATE TABLE [dbo].[Ext_Dynamic_Form](
 [ID] [nvarchar](50) NOT NULL,
 [UniName] [nvarchar](50) NULL,
 [JavaScriptContent] [nvarchar](4000) NULL,
 [Memo] [nvarchar](200) NULL,
 CONSTRAINT [PK_Ext_Dynamic_Form] PRIMARY KEY CLUSTERED 
(
 [ID] ASC
)
) ON [PRIMARY]

Ext JS动态加载JavaScript创建窗体的方法

创建好后，可以初始化数据：

Ext JS动态加载JavaScript创建窗体的方法

创建好后，可以初始化数据：

4 GetJSUI 编程 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using CMCloudDBHelper;
namespace extjs6.Services
{
 /// <summary>
 /// author:jackwangcumt
 /// </summary>
 public class GetJSUI : IHttpHandler
 {

 public void ProcessRequest(HttpContext context)
 {
  string js = "";
  context.Response.ContentType = "text/plain";
  //context.Response.ContentType = "text/javascript";
  CMCDataAccess da = new CMCDataAccess();
  string SQLForJS = "select * FROM Ext_Dynamic_Form where ID='006'";
  System.Data.DataTable dt= da.GetDataTable(SQLForJS);
  if(dt!=null)
  {
  if(dt.Rows.Count==1)
  {
   js = dt.Rows[0]["JavaScriptContent"].ToString();
  }

  }
  
  //utf-8
  context.Response.ContentEncoding = System.Text.Encoding.UTF8;
  context.Response.Write(js);

 }

 public bool IsReusable
 {
  get
  {
  return false;
  }
 }
 }
}

5 主界面html 

<html>
<head>
 <title>Dynamically generate forms from server javascript</title>
 <!-- Library Files -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <script type="text/javascript" src="/UploadFiles/2021-04-02/ext-all-debug.js">


6 运行




 这样我们可以做一个主框架，然后构建菜单和权限等通用体系，通过在数据库中配置菜单及UI，可以动态扩展应用。




Ext JS动态加载JavaScript创建窗体的方法


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米