ui

src/Sqler/wwwroot/Scripts/QueryBuilder/README.md

@@ -8,3 +8,7 @@ https://querybuilder.js.org/
 
 
 https://github.com/mistic100/jQuery.extendext
+
+
+
+http://localhost:4570/Scripts/QueryBuilder/examples/index.html

src/Sqler/wwwroot/Scripts/QueryBuilder/examples/index.html

@@ -6,7 +6,7 @@
 
     <title>jQuery QueryBuilder Example</title>
 
-    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css" id="bt-theme">
+    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css" id="bt-theme">
     <link rel="stylesheet" href="../../bootstrap-icons/font/bootstrap-icons.css">
     <link rel="stylesheet" href="../css/query-builder.default.css" id="qb-theme">
 

src/Sqler/wwwroot/Scripts/autoTemp/autoTemp.Controller.js

@@ -204,7 +204,7 @@
         if (!controllerConfig.idField) controllerConfig.idField = 'id';
         if (!controllerConfig.pidField) controllerConfig.pidField = 'pid';
 
-        //创建 atFields
+        // atFields
         self.atFields = scope.Controller.createAtFields(self.controllerConfig.fields);
 
 

src/Sqler/wwwroot/Scripts/autoTemp/autoTemp.Field.js

@@ -92,7 +92,53 @@
                 formatter: outSpan,
                 sortable: true,
             };
-        }
+        };
+
+
+
+        self.list_getAtFilterConfigs = function () {
+
+            let filterConfigs = self.config.filters;
+            let defaultOperators = ['=', '!=', 'in', 'notIn', 'contains', 'notContain', '>', '>=', '<', '<=', 'isNull', 'isNotNull'];
+            let ig_attr = self.config.ig_attr;
+
+            ig_attr = {
+                ig_class: ig_attr.ig_class == 'TextArea' ? 'Text' : ig_attr.ig_class,
+                ig_param: {
+                    ...(ig_attr.ig_param || {}),
+                    disabled: false,
+                    mode: 'edit',
+                }
+            }; 
+
+            if (filterConfigs) {
+                return filterConfigs.map(config => {
+                    let atFilterConfig = {
+                        field: self.config.field,
+                        title: self.config.list_config?.title || self.config.title || self.config.field,
+                        "operators": defaultOperators,
+                        "ig_attr": ig_attr,
+                        ...config,
+                    };
+                    if ('ig_id' in atFilterConfig.ig_attr) delete atFilterConfig.ig_attr.ig_id;
+                    return atFilterConfig;
+                });
+            }
+
+            if (self.config.useDefaultFilter != false) {
+                let atFilterConfig = {
+                    field: self.config.field,
+                    title: self.config.list_config?.title || self.config.title || self.config.field,
+                    "operators": defaultOperators,
+                    "ig_attr": ig_attr,
+                };
+                if ('ig_id' in atFilterConfig.ig_attr) delete atFilterConfig.ig_attr.ig_id;
+
+                return [atFilterConfig];
+            }
+
+            return [];
+        };
 
 
 

src/Sqler/wwwroot/Scripts/autoTemp/autoTemp.css

@@ -1,52 +1,52 @@
-/*更改显示界面背景颜色*/
-.dvBtn {
-    width: 750px;
-    text-align: center;
-}
-
-
+
 /* --------------------------------------------------------------------------------------- */
-/*    grid                       */
+/*   list.html                       */
 
 .grid_main {
 
 }   
 
-    .grid_main a:link /* 未访问的链接 */ {
-        color: #f00;
-        text-decoration: none;
-    }
-
-    .grid_main a:visited /* 已访问的链接 */ {
-        color: #F00;
-        text-decoration: none;
-    }
-
-    .grid_main a:hover /* 当有鼠标悬停在链接上 */ {
-        color: #008800;
-        text-decoration: none; 
-    }
+.grid_main a:link /* 未访问的链接 */ {
+    color: #f00;
+    text-decoration: none;
+}
 
-    .grid_main a:active /* 被选择的链接 */ {
-        color: #0000FF;
-        text-decoration: none;
-    }
+.grid_main a:visited /* 已访问的链接 */ {
+    color: #F00;
+    text-decoration: none;
+}
 
-    .grid_main .title {
-        font-size: 14px;
-        text-align: left;
-        padding-left: 5px;
-    }
+.grid_main a:hover /* 当有鼠标悬停在链接上 */ {
+    color: #008800;
+    text-decoration: none; 
+}
 
-        .grid_main .title a {
-            color: Black;
-        }
+.grid_main a:active /* 被选择的链接 */ {
+    color: #0000FF;
+    text-decoration: none;
+}
 
+.grid_main .title {
+    font-size: 14px;
+    text-align: left;
+    padding-left: 5px;
+}
 
+.grid_main .title a {
+    color: Black;
+}
 
 .datagrid-header-inner .datagrid-cell {
     text-align:center;
 }
+
+/*    QueryBuilder                    */
+
+#queryBuilder .group-conditions .btn:not(.active){
+    background-color: #0d6efd58
+}
+
+
 /* --------------------------------------------------------------------------------------- */
 /*    item.html                       */
 .ig_ctrl_main {
@@ -62,7 +62,7 @@
     }
 
     .ig_ctrl_main .mtbTitle /* title */ {
-        width: 120px;
+        width: 150px;
         background-color: #eee;
         vertical-align: middle;
         text-align: right;
@@ -70,7 +70,7 @@
     }
 
     .ig_ctrl_main .mtbValue {
-        width: 230px;
+        width: 240px;
         vertical-align: middle;
     }
 
@@ -105,8 +105,14 @@
 /* --------------------------------------------------------------------------------------- */
 /*  infoGet                      */
 
+    .ig_ctrl_main .ig_mode_show {
+        overflow-wrap: break-word;
+        white-space: normal;
+    }
+
     .ig_ctrl_main input.ig_Text{
         width: 220px;
+        line-height:30px;
     }
 
     .ig_ctrl_main textarea.ig_TextArea {
@@ -121,4 +127,8 @@
         display: -moz-inline-box;
         /*不会占全行而且也有完整的盒子模型(垂直方向上的padding和maring);*/
         display: inline-block;
-    }
+    }
+
+    .ig_ctrl_main  .ig_Select {
+
+    }

src/Sqler/wwwroot/Scripts/autoTemp/item.html

@@ -18,6 +18,9 @@
 
     <script src="../util/theme.js"></script>
 
+    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" id="bt-theme" />
+    <link rel="stylesheet" href="../bootstrap-icons/font/bootstrap-icons.css" />
+
     <link rel="stylesheet" type="text/css" href="autoTemp.css" />
     <script src="autoTemp.js"></script>
     <script src="autoTemp.eventListener.js"></script>
@@ -27,10 +30,14 @@
     <script src="autoTemp.Field.js"></script>
 
 
-    <script type="text/javascript" src="../infoGet/widget/infoGet.js"></script>
-    <script type="text/javascript" src="../infoGet/widget/infoGet.element.js"></script>
-    <script type="text/javascript" src="../infoGet/widget/infoGet.widget.Text.js"></script>
-    <script type="text/javascript" src="../infoGet/widget/infoGet.widget.TextArea.js"></script>
+    <!-- for infoGet -->
+    <link rel="stylesheet" href="../select2/css/select2.min.css" />
+    <script src="../select2/js/select2.min.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.widget.Text.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.widget.TextArea.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.widget.Select.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.element.js"></script>
 
     <script type="text/javascript">
 
@@ -175,14 +182,18 @@
 
     </script>
 </head>
-<body style="height:500px;width:780px;">
-    <ul class='ig_ctrl_main'></ul>
+<body style="max-height:800px;width:850px;">
 
-    <div class="dvBtn">
-        <a id="btnSave" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"
-           onclick="javascript:btnSubmit();">保存</a> <a href="#" onclick="javascript:theme.closeWin();"
-                                                       class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">关闭</a>
+    <div class="dvBtn" style="text-align:center;padding:2px;">
+        <button id="btnSave" type="button" class="btn btn-success btn-sm" onclick="javascript:btnSubmit();">
+            <i class="bi bi-save"></i> save
+        </button>
+
+        <button id="btnSave" type="button" class="btn btn-success btn-sm" onclick="javascript:theme.closeWin();">
+            <i class="bi bi-x-square"></i> close
+        </button>
     </div>
 
+    <ul class='ig_ctrl_main'></ul>
 </body>
 </html>

src/Sqler/wwwroot/Scripts/autoTemp/list.FilterGrid.js

@@ -0,0 +1,215 @@
+; (function (scope) {
+
+    let operatorConfigs = [
+        { type: '=', nb_inputs: 1, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean'] },
+        { type: '!=', nb_inputs: 1, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean'] },
+        { type: 'in', nb_inputs: 1, apply_to: ['string', 'number', 'datetime', 'boolean'] },
+        { type: 'notIn', nb_inputs: 1, apply_to: ['string', 'number', 'datetime', 'boolean'] },
+        { type: 'contains', nb_inputs: 1, apply_to: ['string'] },
+        { type: 'notContain', nb_inputs: 1, apply_to: ['string'] },
+
+        { type: '>', nb_inputs: 1, apply_to: ['string', 'number', 'datetime'] },
+        { type: '>=', nb_inputs: 1, apply_to: ['string', 'number', 'datetime'] },
+        { type: '<', nb_inputs: 1, apply_to: ['string', 'number', 'datetime'] },
+        { type: '<=', nb_inputs: 1, apply_to: ['string', 'number', 'datetime'] },
+        { type: 'isNull', nb_inputs: 0, apply_to: ['string', 'number', 'datetime', 'boolean'] },
+        { type: 'isNotNull', nb_inputs: 0, apply_to: ['string', 'number', 'datetime', 'boolean'] },
+    ];
+
+    
+
+    function buildQueryBuilderFilter(atFilterConfig) {
+
+        return {
+            id: atFilterConfig.field,
+            label: atFilterConfig.title || atFilterConfig.field,
+            operators: atFilterConfig.operators || ['=', '!=', 'in', 'notIn', 'contains', 'notContain', '>', '>=', '<', '<=', 'isNull', 'isNotNull'],
+            input: function (rule, name) {
+                //let operator = rule.operator.type;
+                //var $container = rule.$el.find('.rule-value-container');
+                let html = infoGet.buildElementHtml(atFilterConfig.ig_attr);
+                return html;
+            },
+            valueGetter: function (rule) {
+                let igElem = rule.$el.find('info-get');
+                let je = igElem.children('*[ig_class]');
+                let widget = infoGet.getWidget(je[0]);
+                return widget.getValue();
+            },
+            valueSetter: function (rule, value) {
+                let igElem = rule.$el.find('info-get');
+                let je = igElem.children('*[ig_class]');
+                let widget = infoGet.getWidget(je[0]);
+                widget.setValue(value);
+                //rule.operator.nb_inputs
+            },
+        };
+    }
+
+
+    function buildQueryBuilderOptions(atFilterConfigs) {
+        let filters = atFilterConfigs.map(buildQueryBuilderFilter);
+
+        var options = {
+            allow_empty: true,
+
+            default_filter: filters[0]?.id,
+            //sort_filters: true,
+
+            plugins: {
+                'bt-tooltip-errors': { delay: 100 },
+                'sortable': null,
+                'filter-description': { mode: 'bootbox' },
+                //      'chosen-selectpicker': null,
+                'unique-filter': null,
+                'bt-checkbox': { color: 'primary' },
+                'invert': null,
+                //'not-group': null,
+            },
+
+            operators: operatorConfigs,
+            filters: filters,
+        };
+
+        return options;
+    }
+
+
+
+
+    /**
+     * 
+    
+    // atFilterConfig:
+    {
+        "title": "User Name",
+        "field": "name",
+        "operators": ['=', '!=', 'in', 'notIn', 'contains', 'notContain', '>', '>=', '<', '<=', 'isNull', 'isNotNull'],
+        "ig_attr": {
+            "ig_class": "TextArea",
+            "ig_param": { "width": 300 }
+        }
+    }
+     
+     */
+
+
+
+    class FilterGrid {
+
+        atFilterConfigs = [];
+        $el;
+        constructor($el, controller) {
+
+            // #1 get filterConfigs
+            let atFields = controller.atFields;
+            for (let atField of atFields) {
+                let filters = atField.list_getAtFilterConfigs();
+                if (!filters?.length) continue;
+                for (let filter of filters)
+                    this.atFilterConfigs.push(filter);
+            }
+
+            if (!this.atFilterConfigs?.length) return;
+
+            let options = buildQueryBuilderOptions(this.atFilterConfigs);
+
+            // init
+            this.$el = $el;
+            this.$el.queryBuilder(options);
+        }
+
+
+        getRule() {
+            if (!this.$el) return null;
+
+            // {field:'',operator:'notContain',value:''}
+            // {condition:'not|and|or',rules:[]}
+            let rule = this.$el.queryBuilder('getRules');
+            rule = this.convertRule(rule);
+            return rule;
+        }
+
+        // convert {field:'',operator:'notContain',value:''} to {condition:'not',field:'',operator:'contains',value:''}
+        convertRule(rule) {
+            if (!rule) return null;
+            if (rule.operator == 'notContain') {
+                return { ...rule, condition: 'not', operator: 'contains' };
+            }
+            if (rule.rules?.length) {
+                rule.rules = rule.rules.map(rule => this.convertRule(rule));
+            }
+            return rule;
+        }
+
+        setRule(rule) {
+            if (!this.$el) return;
+            this.$el.queryBuilder('setRules', rule);
+        }
+
+        clear() {
+            if (!this.$el) return;
+
+            this.$el.queryBuilder('setRules', {
+                condition: 'AND',
+                rules: []
+            });
+        }
+
+        saveRule() {
+            if (!this.$el) return;
+
+            let url = 'FilterCache:'+location.href;
+            let rule = this.$el.queryBuilder('getRules');
+            localStorage.setValue(url, rule);
+        }
+
+        loadRule() {
+            if (!this.$el) return;
+
+            let url = 'FilterCache:' + location.href;
+            let rule = localStorage.getValue(url);
+            if (rule) {
+                this.$el.queryBuilder('setRules', rule);
+            }
+        }
+
+
+    }
+
+
+    scope.FilterGrid = FilterGrid;
+
+
+
+    // invert
+    $.fn.queryBuilder.defaults({
+        operatorOpposites: {
+            '=': '!=',
+            '!=': '=',
+
+            'in': 'notIn',
+            'notIn': 'in',
+
+            'contains': 'notContain',
+            'notContain': 'contains',
+
+            '>': '<=',
+            '<=': '>',
+
+            '<': '>=',
+            '>=': '<',
+
+            'isNull': 'isNotNull',
+            'isNotNull': 'isNull',
+        },
+
+        //conditionOpposites: {
+        //    'AND': 'OR',
+        //    'OR': 'AND'
+        //}
+    });
+
+
+
+})(window);

src/Sqler/wwwroot/Scripts/autoTemp/list.html

@@ -6,7 +6,7 @@
     <script type="text/javascript" src="../jquery/jquery.min.js"></script>
 
     <!-- for QueryBuilder -->
-    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" id="bt-theme" />
+    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" id="bt-theme" />
     <link rel="stylesheet" href="../bootstrap-icons/font/bootstrap-icons.css" />
     <link rel="stylesheet" href="../QueryBuilder/css/query-builder.default.css" id="qb-theme" />
     <script src="../bootstrap/js/bootstrap.min.js"></script>
@@ -39,13 +39,17 @@
     <script src="autoTemp.Field.js"></script>
 
     <!-- for infoGet -->
-    <script type="text/javascript" src="../infoGet/widget/infoGet.js"></script>
-    <script type="text/javascript" src="../infoGet/widget/infoGet.element.js"></script>
-    <script type="text/javascript" src="../infoGet/widget/infoGet.widget.Text.js"></script>
-    <script type="text/javascript" src="../infoGet/widget/infoGet.widget.TextArea.js"></script>
+    <link rel="stylesheet" href="../select2/css/select2.min.css" />
+    <script src="../select2/js/select2.min.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.widget.Text.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.widget.TextArea.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.widget.Select.js"></script>
+    <script type="text/javascript" src="../infoGet/js/infoGet.element.js"></script>
 
 
     <script type="text/javascript" src="list.js"></script>
+    <script type="text/javascript" src="list.FilterGrid.js"></script>
 
     <style type="text/css">
         html {
@@ -72,7 +76,7 @@
         var controller;
         var template;
         var dataProvider = autoTemp.createDataProvider();
-
+        let filterGrid;
 
         // load autoTemp ControllerConfig
         dataProvider.getControllerConfig(null, function (apiRet) {
@@ -115,31 +119,22 @@
 
                 var gridConfig = controller.list_init();
 
-
-
                 if (controllerConfig.treeField) {
                     template = new TemplateTree();
                 } else {
                     template = new TemplateData();
                 }
 
+                filterGrid = new FilterGrid($('#queryBuilder'), controller);
+                filterGrid.loadRule();
 
-                //(x.1)初始化筛选条件
-                var html = '';
-                var filterAtFields = autoTemp.Controller.createAtFields(controllerConfig.filterFields);
-                for (var atField of filterAtFields) {
-                    html += atField.build_infoGet_Html();
-                }
-                $('#igFilter').html(html);
-                $.parser.parse();
-
-                //(x.2)grid
+                // grid
                 var templateConfig = {
                     controllerConfig: controllerConfig,
                     gridConfig: gridConfig,
                     jqGrid: $('#dl'),
                     dataProvider: dataProvider,
-                    filterAtFields: filterAtFields
+                    filterGrid: filterGrid,
                 };
 
                 autoTemp.eventListener.fireEvent('list.template.beforeInit', [template, templateConfig]);
@@ -157,13 +152,25 @@
 
     <div style="width:100%;height:1px; background-color:#dbe5e7;margin-top: 10px;margin-bottom: 10px;"></div>
     <div>
-        Conditions：
-        <div id="queryBuilder"></div>
-        <a href="#" onclick="javascript:template.getLst();" iconcls="icon-search" class="easyui-linkbutton">
-            Search
-        </a>
+        Filter：
+        <button type="button" class="btn btn-success btn-sm" onclick="javascript:template.getList();">
+            <i class="bi bi-search"></i> search
+        </button>
+
+        <button type="button" class="btn btn-primary btn-sm" onclick="javascript:filterGrid.saveRule();">
+            <i class="bi bi-bookmark-heart"></i> save filter
+        </button>
+
+        <button type="button" class="btn btn-primary btn-sm" onclick="javascript:filterGrid.loadRule();">
+            <i class="bi bi-bookmark-check"></i> load filter
+        </button>
+
+        <button type="button" class="btn btn-primary btn-sm" onclick="javascript:filterGrid.clear();">
+            <i class="bi bi-bookmark-x"></i> clear filter
+        </button>
+
+        <div id="queryBuilder" class="ig_ctrl_main"></div>
     </div>
-    <ul id="igFilter" class='ig_ctrl_main'></ul>
     <div style="width:100%;height:1px; background-color:#dbe5e7;margin-top: 10px;margin-bottom: 10px;"></div>
     <div style="margin-top: 10px;text-align:center;">
         <table id="dl"></table>

src/Sqler/wwwroot/Scripts/autoTemp/list.js

@@ -23,7 +23,7 @@ function TemplateData() {
      *
      * @param isReload bool型，为true则reload，否则直接load
      */
-    self.getLst = function (isReload) {
+    self.getList = function (isReload) {
         if (true == isReload) {
             self.jqGrid.datagrid("reload");
         } else {
@@ -33,23 +33,23 @@ function TemplateData() {
 
 
     self.refreshAfterChange = function (id) {
-        self.getLst(true);
+        self.getList(true);
     }
 
     var dataProvider;
-    var filterAtFields;
+    let filterGrid;
 
     self.init = function (param) {
         //param = {
         //    gridConfig: {},
         //    jqGrid: $(''),
         //    dataProvider: null,
-        //    filterAtFields: {}
+        //    filterGrid,
         //}
 
         self.jqGrid = param.jqGrid;
         dataProvider = param.dataProvider;
-        filterAtFields = param.filterAtFields;
+        filterGrid = param.filterGrid;
 
         //gridConfig.width = 1200;
         //gridConfig.height = Math.max($(document).height() - 400, 430);
@@ -111,26 +111,25 @@ function TemplateData() {
                 text: '刷新',
                 iconCls: 'icon-reload',
                 handler: function () {
-                    self.getLst();
+                    self.getList();
                 }
             }],
             loader: function (param, success, error) {
                 //success(data)：当检索数据成功时调用该回调函数
-                var filterRules = [];
+
                 var queryParam = {
                     "page": {
                         "pageSize": param.rows,
                         "pageIndex": param.page
                     },
-                    "filter": { condition: "and", rules: filterRules },
+                    "filter": null,
                     "sort": []
                 };
 
-                //(x.1)filter
-                autoTemp.Field.getFilter(filterRules, filterAtFields);
-                if (!filterRules.length) queryParam.filter = null;
+                //#1 get filter
+                queryParam.filter = filterGrid.getRule(); 
 
-                //(x.2)sort
+                //#2 sort
                 if (param.sort) {
                     //sort  "name,age"
                     //order "asc,asc"
@@ -176,7 +175,7 @@ function TemplateData() {
                     var dialogParam = {
                         init: function () {
                             var iframe = this.iframe.contentWindow;
-                            iframe.window.event_afterSave = function () { self.getLst(true); };
+                            iframe.window.event_afterSave = function () { self.getList(true); };
                         }
                     };
                     var search = location.search;
@@ -209,7 +208,7 @@ function TemplateTree() {
      *
      * @param isReload bool型，为true则reload，否则直接load
      */
-    self.getLst = function (isReload) {
+    self.getList = function (isReload) {
         if (true == isReload) {
             self.jqGrid.treegrid("reload");
         } else {
@@ -234,22 +233,22 @@ function TemplateTree() {
     }
 
     var dataProvider;
-    var filterAtFields;
     var idField;
     var pidField;
     var rootPidValue = '0';
+    let filterGrid;
 
     self.init = function (param) {
         //param = {
         //    gridConfig: {},
         //    jqGrid: $(''),
         //    dataProvider: null,
-        //    filterAtFields: {}
+        //    filterGrid,
         //}
 
         self.jqGrid = param.jqGrid;
         dataProvider = param.dataProvider;
-        filterAtFields = param.filterAtFields;
+        filterGrid = param.filterGrid;
 
         idField = param.gridConfig.idField;
         pidField = param.controllerConfig.pidField;
@@ -313,7 +312,7 @@ function TemplateTree() {
                 text: '刷新',
                 iconCls: 'icon-reload',
                 handler: function () {
-                    self.getLst();
+                    self.getList();
                 }
             }],
             onBeforeLoad: function (row, param) {
@@ -337,7 +336,7 @@ function TemplateTree() {
                 };
 
 
-                //(x.1) root or not root
+                //#1 root or not root
                 var isRoot = true;
                 if (param.isRoot) {
                     //is root
@@ -353,12 +352,13 @@ function TemplateTree() {
                 }
 
 
-                //(x.2)filter
-                if (isRoot && filterAtFields && filterAtFields.length != 0) {
-                    autoTemp.Field.getFilter(filterRules, filterAtFields);
+                //#2 filter
+                if (isRoot) {
+                    let rule = filterGrid.getRule();
+                    if (rule) filterRules.push(rule);
                 }
 
-                //(x.3)sort
+                //#3 sort
                 if (param.sort) {
                     //sort  "name,age"
                     //order "asc,asc"
@@ -411,7 +411,7 @@ function TemplateTree() {
                         init: function () {
                             var iframe = this.iframe.contentWindow;
                             iframe.window.event_afterSave = function () {
-                                self.getLst(true);
+                                self.getList(true);
                             };
                         }
                     };
@@ -473,3 +473,5 @@ function TemplateTree() {
 
 
 }
+
+

src/Sqler/wwwroot/Scripts/bootstrap/README.md

@@ -1,7 +1,7 @@
-# bootstrap-5.3.3
+# Bootstrap v4.6.2
 
 
-https://getbootstrap.com/docs/5.3/getting-started/download/
+https://getbootstrap.com/docs/4.6/getting-started/introduction/
 
 
 

src/Sqler/wwwroot/Scripts/infoGet/README.md

@@ -4,3 +4,7 @@
 ## custom_elements
 https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
 
+http://localhost:4570/Scripts/infoGet/examples/element.html
+http://localhost:4570/Scripts/infoGet/examples/mode-disable.html
+http://localhost:4570/Scripts/infoGet/examples/mode-show.html
+

src/Sqler/wwwroot/Scripts/infoGet/widget/demo/demo.html → src/Sqler/wwwroot/Scripts/infoGet/examples/demo.html

@@ -1,53 +1,53 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title></title>
-
-    <script type="text/javascript" src="/Scripts/jquery/jquery.min.js"></script>
-
-    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/default/easyui.css" />
-    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/icon.css" />
-    <script type="text/javascript" src="/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
-
-    <script type="text/javascript" src="../infoGet.js"></script>
-    <script type="text/javascript" src="../infoGet.widget.Text.js"></script>
-    <script type="text/javascript" src="../infoGet.widget.TextArea.js"></script>
-
-    <script type="text/javascript">
-        var widget;
-
-        $(function () {
-
-
-            var w1 = new infoGet.widget.Text($('*[ig_id=txt]'));
-
-            var w2 = new infoGet.widget.TextArea($('*[ig_id=TextArea]'));
-
-            widget = w2;
-
-            widget.setValue('test1');
-            var v = widget.getValue();
-
-            widget.disable();
-            widget.enable();
-
-            widget.setMode('show');
-            widget.setMode('edit');
-
-        });
-
-    </script>
-</head>
-<body>
-    Text:
-    <input type="text" ig_class='Text' ig_id='Text' style="width:150px;height:22px;" />
-    <br />
-    TextArea:
-    <textarea cols="40" rows="3" ig_class='TextArea' ig_id='TextArea'></textarea>
-    <br />
-
-    <p>&nbsp;</p>
-
-</body>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+
+    <script type="text/javascript" src="/Scripts/jquery/jquery.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/default/easyui.css" />
+    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/icon.css" />
+    <script type="text/javascript" src="/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
+
+    <script type="text/javascript" src="../infoGet.js"></script>
+    <script type="text/javascript" src="../infoGet.widget.Text.js"></script>
+    <script type="text/javascript" src="../infoGet.widget.TextArea.js"></script>
+
+    <script type="text/javascript">
+        var widget;
+
+        $(function () {
+
+
+            var w1 = new infoGet.widget.Text($('*[ig_id=txt]'));
+
+            var w2 = new infoGet.widget.TextArea($('*[ig_id=TextArea]'));
+
+            widget = w2;
+
+            widget.setValue('test1');
+            var v = widget.getValue();
+
+            widget.disable();
+            widget.enable();
+
+            widget.setMode('show');
+            widget.setMode('edit');
+
+        });
+
+    </script>
+</head>
+<body>
+    Text:
+    <input type="text" ig_class='Text' ig_id='Text' style="width:150px;height:22px;" />
+    <br />
+    TextArea:
+    <textarea cols="40" rows="3" ig_class='TextArea' ig_id='TextArea'></textarea>
+    <br />
+
+    <p>&nbsp;</p>
+
+</body>
 </html>

src/Sqler/wwwroot/Scripts/infoGet/widget/demo/element.html → src/Sqler/wwwroot/Scripts/infoGet/examples/element.html

@@ -10,10 +10,15 @@
     <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/icon.css" />
     <script type="text/javascript" src="/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
 
-    <script type="text/javascript" src="../infoGet.js"></script>
-    <script type="text/javascript" src="../infoGet.widget.Text.js"></script>
-    <script type="text/javascript" src="../infoGet.widget.TextArea.js"></script>
-    <script type="text/javascript" src="../infoGet.element.js"></script>
+
+    <link rel="stylesheet" href="/Scripts/select2/css/select2.min.css">
+    <script src="/Scripts/select2/js/select2.min.js"></script>
+
+    <script type="text/javascript" src="../js/infoGet.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.Text.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.TextArea.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.Select.js"></script>
+    <script type="text/javascript" src="../js/infoGet.element.js"></script>
 
     <script type="text/javascript">
 
@@ -21,6 +26,9 @@
         $(function () {
 
             $(" <info-get ig-class='Text' ig-id='Text' ig-param='{value:\"Text\"}' />").appendTo($('body'));
+
+
+            let v = infoGet.getWidgetByIgId('Select').getValue();
         });
 
     </script>
@@ -29,6 +37,7 @@
 
     <info-get ig-class='TextArea' ig-id='TextArea' ig-param='{value:"TextArea"}' />
 
+    <info-get ig-class='Select' ig-id='Select' ig-param='{options:["opt1","opt2","opt3"],width:150,value:"opt2"}' />
 
 
 </body>

src/Sqler/wwwroot/Scripts/infoGet/examples/mode-disable.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+
+    <script type="text/javascript" src="/Scripts/jquery/jquery.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/default/easyui.css" />
+    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/icon.css" />
+    <script type="text/javascript" src="/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
+
+
+    <link rel="stylesheet" href="/Scripts/select2/css/select2.min.css">
+    <script src="/Scripts/select2/js/select2.min.js"></script>
+
+    <script type="text/javascript" src="../js/infoGet.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.Text.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.TextArea.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.Select.js"></script>
+    <script type="text/javascript" src="../js/infoGet.element.js"></script>
+
+    <script type="text/javascript">
+
+
+        $(function () {
+            infoGet.getWidgetByIgId('Text').disable();
+            infoGet.getWidgetByIgId('TextArea').disable();
+            infoGet.getWidgetByIgId('Select').disable();
+
+        });
+
+    </script>
+</head>
+<body>
+
+    <div>
+        <info-get ig-class='Text' ig-id='Text' ig-param='{value:"Text"}' />
+        <info-get ig-class='TextArea' ig-id='TextArea' ig-param='{value:"TextArea"}' />
+        <info-get ig-class='Select' ig-id='Select' ig-param='{options:["opt1","opt2","opt3"],width:150,value:"opt2"}' />
+    </div>
+
+    <div>
+        <info-get ig-class='Text' ig-id='Text2' ig-param='{value:"Text",disabled:true}' />
+        <info-get ig-class='TextArea' ig-id='TextArea2' ig-param='{value:"TextArea",disabled:true}' />
+        <info-get ig-class='Select' ig-id='Select2' ig-param='{options:["opt1","opt2","opt3"],width:150,value:"opt2",disabled:true}' />
+    </div>
+
+</body>
+</html>

src/Sqler/wwwroot/Scripts/infoGet/examples/mode-show.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+
+    <script type="text/javascript" src="/Scripts/jquery/jquery.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/default/easyui.css" />
+    <link rel="stylesheet" type="text/css" href="/Scripts/jquery-easyui/themes/icon.css" />
+    <script type="text/javascript" src="/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
+
+
+    <link rel="stylesheet" href="/Scripts/select2/css/select2.min.css">
+    <script src="/Scripts/select2/js/select2.min.js"></script>
+
+    <script type="text/javascript" src="../js/infoGet.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.Text.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.TextArea.js"></script>
+    <script type="text/javascript" src="../js/infoGet.widget.Select.js"></script>
+    <script type="text/javascript" src="../js/infoGet.element.js"></script>
+
+    <script type="text/javascript">
+
+
+        $(function () {
+            infoGet.getWidgetByIgId('Text').setMode('show');
+            infoGet.getWidgetByIgId('TextArea').setMode('show');
+            infoGet.getWidgetByIgId('Select').setMode('show');
+
+        });
+
+    </script>
+</head>
+<body>
+
+    <div>
+        <info-get ig-class='Text' ig-id='Text' ig-param='{value:"Text"}' />
+        <info-get ig-class='TextArea' ig-id='TextArea' ig-param='{value:"TextArea"}' />
+        <info-get ig-class='Select' ig-id='Select' ig-param='{options:["opt1","opt2","opt3"],width:150,value:"opt2"}' />
+    </div>
+
+    <div>
+        <info-get ig-class='Text' ig-id='Text2' ig-param='{value:"Text",mode:"show"}' />
+        <info-get ig-class='TextArea' ig-id='TextArea2' ig-param='{value:"TextArea",mode:"show"}' />
+        <info-get ig-class='Select' ig-id='Select2' ig-param='{options:["opt1","opt2","opt3"],width:150,value:"opt2",mode:"show"}' />
+    </div>
+
+</body>
+</html>

src/Sqler/wwwroot/Scripts/infoGet/widget/infoGet.js → src/Sqler/wwwroot/Scripts/infoGet/js/infoGet.js

@@ -1,183 +1,185 @@
-
-/*
-* infoGet 扩展 
-* Date  : 2020-02-20
-* author:lith
-
-    
- */
-
-/* 
-    IgAttr数据格式DEMO为:
-    var demo =  {      'ig_class': 'Text', 
-                       'ig_id': '名称',   'ig_param': {xx:'xx'}    };
-
- 
-*/
-
-
-; (function (infoGet) {
-  
-
-    /// <param name="errorList" type="Array">存放错误列表</param>
-    infoGet.errorList = [];
-     
-
-    
-
-    function WidgetCache() {
-        // dom  -> widget
-        var widgetMap = new Map();
-   
-        this.clear = function () {
-            widgetMap.clear();
-        };
-
-        this.getWidgetByElem = function (elem) {
-            return widgetMap.get(elem)
-        };
-        this.removeWidget = function (elem) {
-            widgetMap.delete(elem);
-        }
-        this.addWidget = function (elem, widget) {
-            widgetMap.set(elem, widget);
-        }
-        //callback:  function(widget,elem){}
-        this.each = function (callback) {
-            widgetMap.forEach(callback);
-        };
-    }
-
-    var widgetCache =  new WidgetCache();
-     
-
-    //infoGet.getElems = function () {
-    //    return $('*[ig_class]');
-    //};
-
-
-    infoGet.setMode = function (mode) {
-        widgetCache.each(function (widget, elem) {
-            widget.setMode(mode);
-        });
-    }
-
-    infoGet.disable = function () {
-        widgetCache.each(function (widget, elem) {
-            widget.disable();
-        });
-    }
- 
-
-    //获取Widget控件
-    infoGet.getWidget = function (elem) {
- 
-        if (!elem) return null;      
-    
-        var widget = widgetCache.getWidgetByElem(elem);
-        if (!widget) {
-            var je = $(elem);
-            var igAttr = infoGet.getIgAttrFromJe(je);
-            var className = igAttr['ig_class'];
-            with (infoGet.widget) {
-                var widgetClass = eval(className);
-            }
-            if ('function' != typeof (widgetClass)) return null;
-
-            widget = new widgetClass(je, igAttr);
-            widgetCache.addWidget(elem, widget);
-        }
-        return widget;
-    }
- 
-
-    //通过igId获取控件
-    infoGet.getWidgetByIgId = function (igId) { 
-        return infoGet.getWidget($('*[ig_id="' + toJsStr("" + igId) + '"]')[0]);
-    };
-
-
-
-    infoGet.parse = function (jqParent) {
-        var jqElems = (jqParent || $(document)).find('*[ig_class]');
-
-        jqElems.each(function (i, elem) {
-            infoGet.getWidget(elem);
-        });
-    };
-
-
-    infoGet.buildHtml = function (igAttr) {
-
-        var className = igAttr['ig_class'];
-        with (infoGet.widget) {
-            var widgetClass = eval(className);
-        }
-        if ('function' != typeof (widgetClass)) return null;
-        return widgetClass.buildHtml(igAttr);
-    }
-
-
-    //获取dom控件ig参数
-    infoGet.getIgAttrFromJe =  function getIgAttrFromJe(je) {        
-        function getAttrEval(je, attrName) {
-            try {
-                var value = je.attr(attrName);
-                return eval('(' + value + ')');
-            } catch (e) {
-                infoGet.errorList.push(e);
-                console.log(e);
-            }
-            return null;
-        }
-
-        var igAttr = {
-            'ig_class': je.attr('ig_class'),
-            'ig_id': je.attr('ig_id'),
-            'ig_param': getAttrEval(je, 'ig_param') || {}             
-        };    
-         
-        return igAttr;
-    };
-
-
-    /// <field name='toXmlStr' type='fucntion'>向xml转换</field>
-    function toXmlMinStr(str) {
-        /// <summary> 向xml转换。
-        /// 例如 转换  <a title=''>ok</a>  中title的值。    
-        /// 转换     &  < > 单引号     为      &amp;  &lt; &gt; &#39;
-        /// </summary>          
-        /// <returns type="String">转换后的字符串</returns>
-        return str.replace(/\&/g, "&amp;").replace(/\</g, "&lt;").replace(/\>/g, "&gt;").replace(/\'/g, "&#39;");
-    };
-
-
-    function toJsStr(str) {
-        /// <summary> 向javascript的字符串转换。
-        /// <para>例如转换为javascript 代码  var str="";  中str对象所赋的值（以引号包围）。 </para>   
-        /// <para>转换   \b \t \n \f \r \" \' \\ 为 \\b \\t \\n \\f \\r \\" \\' \\\\        </para>
-        /// </summary>          
-        /// <returns type="string">转换后的字符串</returns>
-        return str.replace(/\\/g, "\\\\").replace(/\x08/g, "\\b").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\f/g, "\\f").replace(/\r/g, "\\r").replace(/\"/g, "\\\"").replace(/\'/g, "\\\'");
-    };
-
-    infoGet.getHtmlCtrl_attr = function (attrs) {
-         
-        var html = '';
-        for (var name in attrs) {
-            var item = attrs[name];
-            if (!item) continue;
-            html += ' ' + name + '=\'';
-            html += toXmlMinStr('object' == typeof (item) ? JSON.stringify(item) : ('' + item)); 
-            html += '\' ';
-        }
-        return html;
-    };   
-     
-   
- 
-   
-
- 
-
+
+/*
+* infoGet 扩展 
+* Date  : 2020-02-20
+* author:lith
+
+    
+ */
+
+/* 
+    IgAttr数据格式DEMO为:
+    var demo =  {      'ig_class': 'Text', 
+                       'ig_id': '名称',   'ig_param': {xx:'xx'}    };
+
+ 
+*/
+
+
+; (function (infoGet) {
+  
+
+    /// <param name="errorList" type="Array">存放错误列表</param>
+    infoGet.errorList = [];
+     
+
+    
+
+    function WidgetCache() {
+        // dom  -> widget
+        var widgetMap = new Map();
+   
+        this.clear = function () {
+            widgetMap.clear();
+        };
+
+        this.getWidgetByElem = function (elem) {
+            return widgetMap.get(elem)
+        };
+        this.removeWidget = function (elem) {
+            widgetMap.delete(elem);
+        }
+        this.addWidget = function (elem, widget) {
+            widgetMap.set(elem, widget);
+        }
+        //callback:  function(widget,elem){}
+        this.each = function (callback) {
+            widgetMap.forEach(callback);
+        };
+    }
+
+    var widgetCache =  new WidgetCache();
+     
+
+    //infoGet.getElems = function () {
+    //    return $('*[ig_class]');
+    //};
+
+
+    infoGet.setMode = function (mode) {
+        widgetCache.each(function (widget, elem) {
+            widget.setMode(mode);
+        });
+    }
+
+    infoGet.disable = function () {
+        widgetCache.each(function (widget, elem) {
+            widget.disable();
+        });
+    }
+ 
+
+    //获取Widget控件
+    infoGet.getWidget = function (elem) {
+ 
+        if (!elem) return null;      
+    
+        var widget = widgetCache.getWidgetByElem(elem);
+        if (!widget) {
+            var je = $(elem);
+            var igAttr = infoGet.getIgAttrFromJe(je);
+            var className = igAttr['ig_class'];
+            with (infoGet.widget) {
+                var widgetClass = eval(className);
+            }
+            if ('function' != typeof (widgetClass)) return null;
+
+            widget = new widgetClass(je, igAttr);
+            widgetCache.addWidget(elem, widget);
+        }
+        return widget;
+    }
+ 
+
+    //通过igId获取控件
+    infoGet.getWidgetByIgId = function (igId) { 
+        return infoGet.getWidget($('*[ig_id="' + toJsStr("" + igId) + '"]')[0]);
+    };
+
+
+
+    infoGet.parse = function (jqParent) {
+        var jqElems = (jqParent || $(document)).find('*[ig_class]');
+
+        jqElems.each(function (i, elem) {
+            infoGet.getWidget(elem);
+        });
+    };
+
+
+    infoGet.buildHtml = function (igAttr) {
+
+        var className = igAttr['ig_class'];
+        with (infoGet.widget) {
+            var widgetClass = eval(className);
+        }
+        if ('function' != typeof (widgetClass)) return null;
+        return widgetClass.buildHtml(igAttr);
+    }
+
+
+    //获取dom控件ig参数
+    infoGet.getIgAttrFromJe =  function getIgAttrFromJe(je) {        
+        function getAttrEval(je, attrName) {
+            try {
+                var value = je.attr(attrName);
+                return eval('(' + value + ')');
+            } catch (e) {
+                infoGet.errorList.push(e);
+                console.log(e);
+            }
+            return null;
+        }
+
+        var igAttr = {
+            'ig_class': je.attr('ig_class'),
+            'ig_id': je.attr('ig_id'),
+            'ig_param': getAttrEval(je, 'ig_param') || {}             
+        };    
+         
+        return igAttr;
+    };
+
+
+    /// <field name='toXmlStr' type='fucntion'>向xml转换</field>
+    function toXmlMinStr(str) {
+        /// <summary> 向xml转换。
+        /// 例如 转换  <a title=''>ok</a>  中title的值。    
+        /// 转换     &  < > 单引号     为      &amp;  &lt; &gt; &#39;
+        /// </summary>          
+        /// <returns type="String">转换后的字符串</returns>
+        return str.replace(/\&/g, "&amp;").replace(/\</g, "&lt;").replace(/\>/g, "&gt;").replace(/\'/g, "&#39;");
+    };
+
+
+    function toJsStr(str) {
+        /// <summary> 向javascript的字符串转换。
+        /// <para>例如转换为javascript 代码  var str="";  中str对象所赋的值（以引号包围）。 </para>   
+        /// <para>转换   \b \t \n \f \r \" \' \\ 为 \\b \\t \\n \\f \\r \\" \\' \\\\        </para>
+        /// </summary>          
+        /// <returns type="string">转换后的字符串</returns>
+        return str.replace(/\\/g, "\\\\").replace(/\x08/g, "\\b").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\f/g, "\\f").replace(/\r/g, "\\r").replace(/\"/g, "\\\"").replace(/\'/g, "\\\'");
+    };
+
+    infoGet.getHtmlCtrl_attr = function (attrs) {
+         
+        var html = '';
+        for (var name in attrs) {
+            var item = attrs[name];
+            if (!item) continue;
+            html += ' ' + name + '=\'';
+            html += toXmlMinStr('object' == typeof (item) ? JSON.stringify(item) : ('' + item)); 
+            html += '\' ';
+        }
+        return html;
+    };   
+     
+
+    infoGet.toJsStr = toJsStr;
+    infoGet.toXmlStr = toXmlMinStr;
+
+   
+
+ 
+
 })(window.infoGet || (window.infoGet = {}));

src/Sqler/wwwroot/Scripts/infoGet/js/infoGet.widget.Select.js

@@ -0,0 +1,215 @@
+
+/*
+* infoGet 扩展 
+* Date  : 2020-02-19
+* author:lith
+ 
+
+ 
+*/
+
+
+/*
+
+  <info-get ig-class='Select' ig-id='Select' ig-param='{value:"Text"}' />
+
+
+    (1).初始化属性
+    ig_param:
+    {
+       options: ['option1','option2','option3'] ,  // or [{id:'1',text:'option1'}]
+       value:'option2',     // optional
+       width:220,           // optional, default:220
+       height:null,         // optional, default:null
+       disabled:false,      // optional, default:false
+       mode:'edit|show',    // optional, default:edit
+    }
+
+
+     (2).对象属性 
+     [属性]
+     (x.0)  igId,igParam,disabled
+
+     [方法]
+     (x.1)  event_Set(eventName, funcEvent) 
+     (x.2)  event_Add(eventName, funcEvent)
+
+     (x.3)  init() 
+     (x.4)  getValue(),setValue(value)  
+     (x.5)  enable(),disable() 
+    
+     (x.8)  resize(width, height)
+     (x.9)  setMode(mode) 
+ 
+
+   (3).事件
+     (x.1)  onSetValue :  function (value) { };
+            在值变更时触发
+
+
+   (4).Demo
+
+ */
+
+; if (typeof (infoGet) == 'undefined') infoGet = {};
+if (!infoGet.widget) infoGet.widget = {};
+
+; (function (scope) {
+
+    var className = 'Select';
+
+    
+ 
+
+    class Widget {
+
+        jeElem;
+        jeShow;
+ 
+        ig_attr;
+        ig_param;
+
+        mode = 'edit';
+        disabled = false;
+
+        options; // Option[]
+        constructor(jeElem, ig_attr) {
+            this.jeElem = jeElem;
+            this.ig_attr = ig_attr;
+            this.ig_param = ig_attr?.ig_param || {};
+
+            let options = this.ig_param.options || [];
+
+            this.options = options.map(option => {
+                if (typeof (option) === 'object') return option;
+                return { text: option, id: option };
+            });
+
+            this.init();
+        }
+
+
+        init() {
+            this.jeElem.addClass('ig_Select');
+
+            // #1 width height
+            this.jeElem.width(this.ig_param.width || 220);
+            if ('height' in this.ig_param) {
+                this.jeElem.height(this.ig_param.height);
+            }
+
+            // #2 init element
+            this.jeElem.select2({
+                data: this.options,
+                allowClear: true,
+            });
+ 
+
+            // #3 disabled
+            if (this.ig_param.disabled === true) {
+                this.disable();
+            }
+
+            // #4 mode
+            if ('mode' in this.ig_param) {
+                this.setMode(this.ig_param.mode);
+            }
+
+            // #5 value
+            if ('value' in this.ig_param) {
+                this.setValue(this.ig_param.value);
+            }
+      
+        }
+
+
+        //mode   'show'  'edit'(default) 
+        setMode(mode) {
+            let self = this
+
+            if (self.mode == mode) return;
+
+            var value = self.getValue();
+
+            self.mode = mode;
+            if (self.mode == 'edit') {
+                this.jeElem.show();
+                this.jeElem.nextAll('span.select2-container').show();
+                this.jeShow?.hide();
+            } else {
+                if (!this.jeShow) {
+                    this.jeShow = $('<span class="ig_mode_show ig_Select"  /> ');
+                    this.jeElem.after(this.jeShow);
+                }
+                this.jeElem.hide();
+                this.jeElem.nextAll('span.select2-container').hide();
+                this.jeShow.show();
+            }
+
+            self.setValue(value);
+        };
+
+
+        setValue(value) {
+            if (this.mode == 'edit') {
+                this.jeElem.val(value);
+                this.jeElem.trigger('change');
+            } else {
+                this.jeShow.text(value);
+            }   
+        }
+
+        getValue() {
+            if (this.mode == 'edit') {
+                return this.jeElem.val();
+            } else {
+                return this.jeShow.text();
+            }
+        }
+
+        enable() {
+            this.disabled = false;
+            this.jeElem.select2({ disabled: false });
+        }
+
+        disable() {
+            this.disabled = true;
+            this.jeElem.select2({ disabled: true });
+        }
+
+    }
+     
+
+    //构建html控件字符串
+    Widget.buildHtml = function (ig_attr) {        
+
+        var html = '<select  ';      
+
+
+        //html += ' style="width:' + width + 'px;height:' + height + 'px;" ';
+        var igParam = ig_attr['ig_param'];
+        if (igParam) {
+            var style = '';
+            if (igParam.width) style += 'width:' + igParam.width + 'px;';
+
+            if (igParam.height) style += 'height:' + igParam.height + 'px;';
+
+            if (style) html += ' style="' + style + '"';
+        }
+       
+        
+
+        html += infoGet.getHtmlCtrl_attr(ig_attr);
+        html += ' />';
+        return html;
+
+    };
+
+
+ 
+    Widget.className = className;
+    scope[className] = Widget;
+
+ 
+
+})(infoGet.widget);

src/Sqler/wwwroot/Scripts/infoGet/widget/infoGet.widget.Text.js → src/Sqler/wwwroot/Scripts/infoGet/js/infoGet.widget.Text.js

@@ -1,205 +1,213 @@
-
-/*
-* infoGet 扩展 
-* Date  : 2020-02-19
-* author:lith
- 
-
- 
-*/
-
-
-/*
-    (1).初始化属性
-    ig_param 数据格式:
-        width(int): 控件的宽度(默认150)。
-        height(int): 控件的高度(默认22)。
-      
-
-        value(string or other): 默认值。如果为时间框,并且默认值为"getdate()",则初始时会转换成当前时间
-        mode(string):  模式，为edit或show,默认为edit
-        disabled(bool): 控件是否禁用,禁用为"true",否则为"false"(默认false)。
-
-
-
-     (2).对象属性 
-     [属性]
-     (x.0)  igId,igParam,disabled
-
-     [方法]
-     (x.1)  event_Set(eventName, funcEvent) 
-     (x.2)  event_Add(eventName, funcEvent)
-
-     (x.3)  init() 
-     (x.4)  getValue(),setValue(value)  
-     (x.5)  enable(),disable() 
-    
-     (x.8)  resize(width, height)
-     (x.9)  setMode(mode) 
- 
-
-   (3).事件
-     (x.1)  onSetValue :  function (value) { };
-            在值变更时触发
-
-
-   (4).Demo
-
- */
-
-; if (typeof (infoGet) == 'undefined') infoGet = {};
-if (!infoGet.widget) infoGet.widget = {};
-
-; (function (scope) {
-
-    var className = 'Text';
-
-    
-
-    var Widget = function (jeElem, igAttr) {
-        var self = this;
-
-
-
-        self.je = jeElem;
-        var jeEdit = jeElem;
-        var jeShow;
-
-        if (!igAttr) igAttr = infoGet.getIgAttrFromJe(self.je);
-
-        self.mode = 'edit';
-        self.disabled = false;
-
-
-        self.init = function () {
-            jeEdit.addClass('ig_mode_edit').addClass('ig_Text');
-            var igParam = igAttr['ig_param'];
-            if (!igParam) return;
-
-            if (igParam.disabled === true) {
-                self.disable();
-            }
-
-            if ('value' in igParam) {
-                self.setValue(igParam.value);
-            }
-        };
-    
-
-        //修改模式
-        //mode 显示模式，值可为 'show'  'edit'(默认) 
-        self.setMode = function (mode) {
-            if (self.mode == mode) return;
-
-            var value = self.getValue();
-
-            self.mode = mode;
-            if (self.mode == 'edit') {
-                jeEdit.show();
-                jeShow.hide();
-
-                self.je = jeEdit;
-            } else {
-                if (!jeShow) {
-                    jeShow = $('<span class="ig_mode_show ig_Text"  /> ');
-                    jeEdit.after(jeShow);
-                }
-
-                jeShow.show();
-                jeEdit.hide();
-
-                self.je = jeShow;
-            }
-
-            self.setValue(value);
-        };
-
-
-      
-     
-
-        //禁用控件
-        self.disable = function () {          
-            if (self.mode == 'edit') {
-                jeEdit[0].disabled = 'disabled';
-                self.disabled = true;
-            }
-           
-        };
-
-        //启用控件
-        self.enable = function () {
-            if (self.mode == 'edit') {
-                jeEdit[0].disabled = '';
-                self.disabled = false;
-            }            
-        };
-
-
-
-
-        self.getValue = function () {
-            if (self.mode == 'edit') {
-                return jeEdit.val();
-            } else {
-                return jeShow.text();
-            }            
-        };
-
-
-        self.setValue = function (value) {
-            if (self.mode == 'edit') {
-                return jeEdit.val(value);
-            } else {
-                return jeShow.text(value);
-            }            
-        };
-
-
-        //重置大小
-        self.resize = function (width, height) {            
-            if (width) jeEdit.width(width);
-            if (height) jeEdit.height(height);
-        }      
- 
-
-
-        self.init();
-
-
-    }
-     
-
-    //构建html控件字符串
-    Widget.buildHtml = function (igAttr) {        
-
-        var html = '<input type="text" ';      
-
-
-        //html += ' style="width:' + width + 'px;height:' + height + 'px;" ';
-        var igParam = igAttr['ig_param'];
-        if (igParam) {
-            var style = '';
-            if (igParam.width) style += 'width:' + igParam.width + 'px;';
-
-            if (igParam.height) style += 'height:' + igParam.height + 'px;';
-
-            if (style) html += ' style="' + style + '"';
-        }
-       
-        
-
-        html += infoGet.getHtmlCtrl_attr(igAttr);
-        html += ' />';
-        return html;
-
-    };
-
-
- 
-    Widget.className = className;
-    scope[className] = Widget;
-
- 
-
+
+/*
+* infoGet 扩展 
+* Date  : 2020-02-19
+* author:lith
+ 
+
+ 
+*/
+
+
+/*
+
+  <info-get ig-class='Text' ig-id='Text' ig-param='{value:"Text"}' />
+
+
+    (1).初始化属性
+    ig_param 数据格式:
+        width(int): 控件的宽度(默认150)。
+        height(int): 控件的高度(默认22)。
+      
+
+        value(string or other): 默认值。如果为时间框,并且默认值为"getdate()",则初始时会转换成当前时间
+        mode(string):  模式，为edit或show,默认为edit
+        disabled(bool): 控件是否禁用,禁用为"true",否则为"false"(默认false)。
+
+
+
+     (2).对象属性 
+     [属性]
+     (x.0)  igId,igParam,disabled
+
+     [方法]
+     (x.1)  event_Set(eventName, funcEvent) 
+     (x.2)  event_Add(eventName, funcEvent)
+
+     (x.3)  init() 
+     (x.4)  getValue(),setValue(value)  
+     (x.5)  enable(),disable() 
+    
+     (x.8)  resize(width, height)
+     (x.9)  setMode(mode) 
+ 
+
+   (3).事件
+     (x.1)  onSetValue :  function (value) { };
+            在值变更时触发
+
+
+   (4).Demo
+
+ */
+
+; if (typeof (infoGet) == 'undefined') infoGet = {};
+if (!infoGet.widget) infoGet.widget = {};
+
+; (function (scope) {
+
+    var className = 'Text';
+
+    
+
+    var Widget = function (jeElem, ig_attr) {
+        var self = this;
+
+
+
+        self.je = jeElem;
+        var jeEdit = jeElem;
+        var jeShow;
+
+        if (!ig_attr) ig_attr = infoGet.getIgAttrFromJe(self.je);
+
+        self.mode = 'edit';
+        self.disabled = false;
+
+
+        self.init = function () {
+            jeEdit.addClass('ig_mode_edit').addClass('ig_Text');
+            var ig_param = ig_attr['ig_param'];
+            if (!ig_param) return;
+
+            if (ig_param.disabled === true) {
+                self.disable();
+            }
+
+            if ('mode' in ig_param) {
+                self.setMode(ig_param.mode);
+            }
+
+            if ('value' in ig_param) {
+                self.setValue(ig_param.value);
+            }
+        };
+    
+
+        //修改模式
+        //mode 显示模式，值可为 'show'  'edit'(默认) 
+        self.setMode = function (mode) {
+            if (self.mode == mode) return;
+
+            var value = self.getValue();
+
+            self.mode = mode;
+            if (self.mode == 'edit') {
+                jeEdit.show();
+                jeShow.hide();
+
+                self.je = jeEdit;
+            } else {
+                if (!jeShow) {
+                    jeShow = $('<span class="ig_mode_show ig_Text"  /> ');
+                    jeEdit.after(jeShow);
+                }
+
+                jeShow.show();
+                jeEdit.hide();
+
+                self.je = jeShow;
+            }
+
+            self.setValue(value);
+        };
+
+
+      
+     
+
+        //禁用控件
+        self.disable = function () {          
+            if (self.mode == 'edit') {
+                jeEdit[0].disabled = 'disabled';
+                self.disabled = true;
+            }
+           
+        };
+
+        //启用控件
+        self.enable = function () {
+            if (self.mode == 'edit') {
+                jeEdit[0].disabled = '';
+                self.disabled = false;
+            }            
+        };
+
+
+
+
+        self.getValue = function () {
+            if (self.mode == 'edit') {
+                return jeEdit.val();
+            } else {
+                return jeShow.text();
+            }            
+        };
+
+
+        self.setValue = function (value) {
+            if (self.mode == 'edit') {
+                return jeEdit.val(value);
+            } else {
+                return jeShow.text(value);
+            }            
+        };
+
+
+        //重置大小
+        self.resize = function (width, height) {
+            if (width) jeEdit.width(width);
+            if (height) jeEdit.height(height);
+        }      
+ 
+
+
+        self.init();
+
+
+    }
+     
+
+    //构建html控件字符串
+    Widget.buildHtml = function (igAttr) {        
+
+        var html = '<input type="text" ';      
+
+
+        //html += ' style="width:' + width + 'px;height:' + height + 'px;" ';
+        var igParam = igAttr['ig_param'];
+        if (igParam) {
+            var style = '';
+            if (igParam.width) style += 'width:' + igParam.width + 'px;';
+
+            if (igParam.height) style += 'height:' + igParam.height + 'px;';
+
+            if (style) html += ' style="' + style + '"';
+        }
+       
+        
+
+        html += infoGet.getHtmlCtrl_attr(igAttr);
+        html += ' />';
+        return html;
+
+    };
+
+
+ 
+    Widget.className = className;
+    scope[className] = Widget;
+
+ 
+
 })(infoGet.widget);

src/Sqler/wwwroot/Scripts/infoGet/widget/infoGet.widget.TextArea.js → src/Sqler/wwwroot/Scripts/infoGet/js/infoGet.widget.TextArea.js

@@ -1,209 +1,217 @@
-
-/*
-* infoGet 扩展
-* Date  : 2020-02-19
-* author:lith
-
-
-
-*/
-
-
-/*
-    (1).初始化属性
-    ig_param 数据格式:
-        width(int): 控件的宽度(默认150)。
-        height(int): 控件的高度(默认22)。
-        required(string): 控件是否必填,  'true': 必填; 'valueSetToDefaultIfInvalid':若为无效值则设为默认值；  其他(例如'false'):非必填（默认值）
-        invalidMessage(string): 必填提示内容,为空则启用自定义提示消息 ，例如：'名字不允许为空!' 。
-        disabled(bool): 控件是否禁用,禁用为"true",否则为"false"(默认false)。 
-        desc(string): 控件描述。例如：'申请的金额总额，单位：万元。'。
-        value(string or other): 默认值。如果为时间框,并且默认值为"getdate()",则初始时会转换成当前时间
-
-        otherParam: 其他自定义属性存放。
-        {
-            type(string):文本框类型,可选值:"textbox","textarea","numberbox","password","datebox"(默认"textbox")。
-            dateFmt(string):时间格式,例如:"yyyy-MM-dd","yyyy-MM-dd HH:mm:ss","yyyy-MM-dd HH:mm","HH:mm:ss"
-            numberFmt(string):保留小数点位数.默认0
-        }
-
-
-     (2).对象属性 
-     [属性]
-     (x.0)  igId,igParam,disabled
-
-     [方法]
-     (x.1)  event_Set(eventName, funcEvent) 
-     (x.2)  event_Add(eventName, funcEvent)
-
-     (x.3)  init() 
-     (x.4)  getValue(),setValue(value)  
-     (x.5)  enable(),disable() 
-     (x.6)  validate(howToReport) 
-     (x.7)  getDefaultValue() 
-     (x.8)  resize(width, height)
-     (x.9)  setMode(mode) 
-     (x.10) convertTextByValue(value, funcOnConvert) 
-
-   (3).事件
-     (x.1)  onSetValue :  function (value) { };
-            在值变更时触发
-
-
-   (4).Demo
-
- */
-
-; if (typeof (infoGet) == 'undefined') infoGet = {};
-if (!infoGet.widget) infoGet.widget = {};
-
-; (function (scope) {
-
-    var className = 'TextArea';
-
-    
-
-    var Widget = function (jeElem, igAttr) {
-        var self = this;
- 
-
-        self.je = jeElem;
-        var jeEdit = jeElem;
-        var jeShow;
-
-        if (!igAttr) igAttr = infoGet.getIgAttrFromJe(self.je);
-
-        self.mode = 'edit';
-        self.disabled = false;
-
-
-        self.init = function () {
-            jeEdit.addClass('ig_mode_edit').addClass('ig_TextArea');
-            var igParam = igAttr['ig_param'];
-            if (!igParam) return;
-
-            if (igParam.disabled === true) {
-                self.disable();
-            }
-
-            if ('value' in igParam) {
-                self.setValue(igParam.value);
-            }
-        };
-    
-
-        //修改模式
-        //mode 显示模式，值可为 'show'  'edit'(默认) 
-        self.setMode = function (mode) {
-            if (self.mode == mode) return;
-
-            var value = self.getValue();
-
-            self.mode = mode;
-            if (self.mode == 'edit') {
-                jeEdit.show();
-                jeShow.hide();
-
-                self.je = jeEdit;
-            } else {
-                if (!jeShow) {
-                    jeShow = $('<span class="ig_mode_show ig_TextArea"  /> ');
-                    jeEdit.after(jeShow);
-                }
-           
-                jeShow.show();
-                jeEdit.hide();
-
-                self.je = jeShow;
-            }
-
-            self.setValue(value);
-        };
-
-
-      
-     
-
-        //禁用控件
-        self.disable = function () {          
-            if (self.mode == 'edit') {
-                jeEdit[0].disabled = 'disabled';
-                self.disabled = true;
-            }
-           
-        };
-
-        //启用控件
-        self.enable = function () {
-            if (self.mode == 'edit') {
-                jeEdit[0].disabled = '';
-                self.disabled = false;
-            }            
-        };
-
-
-
-
-        self.getValue = function () {
-            if (self.mode == 'edit') {
-                return jeEdit.val();
-            } else {
-                return jeShow.text();
-            }            
-        };
-
-
-        self.setValue = function (value) {
-            if (self.mode == 'edit') {
-                return jeEdit.val(value);
-            } else {
-                return jeShow.text(value);
-            }            
-        };
-
-
-        //重置大小
-        self.resize = function (width, height) {            
-            if (width) jeEdit.width(width);
-            if (height) jeEdit.height(height);
-        }      
- 
-
-
-        self.init();
-
-
-    }
-     
-
-
-    //构建html控件字符串
-    Widget.buildHtml = function (igAttr) {
-
-        var html = '<textarea  cols="40" rows="3" '; 
- 
-
-        //html += ' style="width:' + width + 'px;height:' + height + 'px;" ';
-        var igParam = igAttr['ig_param'];
-        if (igParam) {
-            var style = '';
-            if (igParam.width) style += 'width:' + igParam.width + 'px;';
-
-            if (igParam.height) style += 'height:' + igParam.height + 'px;';
-
-            if (style) html += ' style="' + style + '"';
-        }
-
-
-        html += infoGet.getHtmlCtrl_attr(igAttr);
-        html += ' ></textarea>';
-        return html;
-
-    };
- 
-    Widget.className = className;
-    scope[className] = Widget;
-
- 
-
+
+/*
+* infoGet 扩展
+* Date  : 2020-02-19
+* author:lith
+
+
+
+*/
+
+
+/*
+
+  <info-get ig-class='TextArea' ig-id='TextArea' ig-param='{value:"TextArea"}' />
+
+
+    (1).初始化属性
+    ig_param 数据格式:
+        width(int): 控件的宽度(默认150)。
+        height(int): 控件的高度(默认22)。
+        required(string): 控件是否必填,  'true': 必填; 'valueSetToDefaultIfInvalid':若为无效值则设为默认值；  其他(例如'false'):非必填（默认值）
+        invalidMessage(string): 必填提示内容,为空则启用自定义提示消息 ，例如：'名字不允许为空!' 。
+        disabled(bool): 控件是否禁用,禁用为"true",否则为"false"(默认false)。 
+        desc(string): 控件描述。例如：'申请的金额总额，单位：万元。'。
+        value(string or other): 默认值。如果为时间框,并且默认值为"getdate()",则初始时会转换成当前时间
+
+        otherParam: 其他自定义属性存放。
+        {
+            type(string):文本框类型,可选值:"textbox","textarea","numberbox","password","datebox"(默认"textbox")。
+            dateFmt(string):时间格式,例如:"yyyy-MM-dd","yyyy-MM-dd HH:mm:ss","yyyy-MM-dd HH:mm","HH:mm:ss"
+            numberFmt(string):保留小数点位数.默认0
+        }
+
+
+     (2).对象属性 
+     [属性]
+     (x.0)  igId,igParam,disabled
+
+     [方法]
+     (x.1)  event_Set(eventName, funcEvent) 
+     (x.2)  event_Add(eventName, funcEvent)
+
+     (x.3)  init() 
+     (x.4)  getValue(),setValue(value)  
+     (x.5)  enable(),disable() 
+     (x.6)  validate(howToReport) 
+     (x.7)  getDefaultValue() 
+     (x.8)  resize(width, height)
+     (x.9)  setMode(mode) 
+     (x.10) convertTextByValue(value, funcOnConvert) 
+
+   (3).事件
+     (x.1)  onSetValue :  function (value) { };
+            在值变更时触发
+
+
+   (4).Demo
+
+ */
+
+; if (typeof (infoGet) == 'undefined') infoGet = {};
+if (!infoGet.widget) infoGet.widget = {};
+
+; (function (scope) {
+
+    var className = 'TextArea';
+
+    
+
+    var Widget = function (jeElem, ig_attr) {
+        var self = this;
+ 
+
+        self.je = jeElem;
+        var jeEdit = jeElem;
+        var jeShow;
+
+        if (!ig_attr) ig_attr = infoGet.getIgAttrFromJe(self.je);
+
+        self.mode = 'edit';
+        self.disabled = false;
+
+
+        self.init = function () {
+            jeEdit.addClass('ig_mode_edit').addClass('ig_TextArea');
+            var ig_param = ig_attr['ig_param'];
+            if (!ig_param) return;
+
+            if (ig_param.disabled === true) {
+                self.disable();
+            }
+
+            if ('mode' in ig_param) {
+                self.setMode(ig_param.mode);
+            }
+
+            if ('value' in ig_param) {
+                self.setValue(ig_param.value);
+            }
+        };
+    
+
+        //修改模式
+        //mode 显示模式，值可为 'show'  'edit'(默认) 
+        self.setMode = function (mode) {
+            if (self.mode == mode) return;
+
+            var value = self.getValue();
+
+            self.mode = mode;
+            if (self.mode == 'edit') {
+                jeEdit.show();
+                jeShow.hide();
+
+                self.je = jeEdit;
+            } else {
+                if (!jeShow) {
+                    jeShow = $('<span class="ig_mode_show ig_TextArea"  /> ');
+                    jeEdit.after(jeShow);
+                }
+           
+                jeShow.show();
+                jeEdit.hide();
+
+                self.je = jeShow;
+            }
+
+            self.setValue(value);
+        };
+
+
+      
+     
+
+        //禁用控件
+        self.disable = function () {          
+            if (self.mode == 'edit') {
+                jeEdit[0].disabled = 'disabled';
+                self.disabled = true;
+            }
+           
+        };
+
+        //启用控件
+        self.enable = function () {
+            if (self.mode == 'edit') {
+                jeEdit[0].disabled = '';
+                self.disabled = false;
+            }            
+        };
+
+
+
+
+        self.getValue = function () {
+            if (self.mode == 'edit') {
+                return jeEdit.val();
+            } else {
+                return jeShow.text();
+            }            
+        };
+
+
+        self.setValue = function (value) {
+            if (self.mode == 'edit') {
+                return jeEdit.val(value);
+            } else {
+                return jeShow.text(value);
+            }            
+        };
+
+
+        //重置大小
+        self.resize = function (width, height) {            
+            if (width) jeEdit.width(width);
+            if (height) jeEdit.height(height);
+        }      
+ 
+
+
+        self.init();
+
+
+    }
+     
+
+
+    //构建html控件字符串
+    Widget.buildHtml = function (igAttr) {
+
+        var html = '<textarea  cols="40" rows="3" '; 
+ 
+
+        //html += ' style="width:' + width + 'px;height:' + height + 'px;" ';
+        var igParam = igAttr['ig_param'];
+        if (igParam) {
+            var style = '';
+            if (igParam.width) style += 'width:' + igParam.width + 'px;';
+
+            if (igParam.height) style += 'height:' + igParam.height + 'px;';
+
+            if (style) html += ' style="' + style + '"';
+        }
+
+
+        html += infoGet.getHtmlCtrl_attr(igAttr);
+        html += ' ></textarea>';
+        return html;
+
+    };
+ 
+    Widget.className = className;
+    scope[className] = Widget;
+
+ 
+
 })(infoGet.widget);

src/Sqler/wwwroot/Scripts/util/theme.js

@@ -207,7 +207,7 @@
                 dialogParam.title = title;
             }
 
-            dialogParam.width = (width || dialogParam.width || '800px');
+            dialogParam.width = (width || dialogParam.width || '900px');
 
             if (height) {
                 dialogParam.height = height;