add autoresize in in jqgrid

totoro
1 parent ee7a1e4b
Showing 3 changed files with 76 additions and 22 deletions Show diff stats
view/jqgrid.anubis
view/view_rows_import.anubis
view/view_table_renderer.anubis
@@ -58,6 +58,21 @@ define String
 .
 define String
+  search_options
+  (
+    String  col_name
+  )=
+" searchoptions: {
+    dataInit: function (elem, options) {
+      initAutocomplete.call(this, elem, \""+col_name+"\");
+    },
+    sopt: [ 'cn', 'eq', 'bw', 'ew', 'bn', 'nc', 'en' ],
+      clearSearch: true
+  }"  
+.
+  
+
+define String
   to_jqGrid_ColModel
   (
     SQLite3DataBase     db,
@@ -69,33 +84,33 @@ define String
   if model is
   {
      primary_key                                    then "{ name: \"id\", hidden:true }", 
-     information(label,column_name,width,help)      then "{ name: \""+column_name+"\", label: \""+_T(label)+"\" }",
-     text(label,column_name,help)                   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true }",
-     password(label,column_name,help)               then "{ name: \""+column_name+"\", label: \""+_T(label)+"\" }", 
+     information(label,column_name,width,help)      then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", autoResizable: true, "+search_options(column_name)+"}",
+     text(label,column_name,help)                   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, "+search_options(column_name)+" }",
+     password(label,column_name,help)               then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", autoResizable: true }", 
      foreign_text(label,column_name,selector,help)  then 
-      "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, edittype:\"select\", editoptions:{value: "+to_jqGrid_selector(selector.get(db,table_referer,""))+"},"+
+      "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, edittype:\"select\", editoptions:{value: "+to_jqGrid_selector(selector.get(db,table_referer,""))+"},"+
       "  formatter: \"select\","+
       "  formatoptions:{value: "+to_jqGrid_selector(selector.get(db, table_referer, ""))+"},"+
       "}",
      choices_text(label,column_name,selector,help)  then 
-      "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, edittype:\"select\", editoptions:{value: "+to_jqGrid_selector(selector.get(db, empty_referer, ""))+"},"+
+      "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, edittype:\"select\", editoptions:{value: "+to_jqGrid_selector(selector.get(db, empty_referer, ""))+"},"+
       "  formatter: \"select\","+
       "  formatoptions:{value: "+to_jqGrid_selector(selector.get(db, empty_referer, ""))+"},"+
       "}",
      text_area(label,column_name,help)              then "{ name: \""+column_name+"\", label: \""+_T(label)+"\" }",
-     boolean(label,column_name,help)                then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, template: \"booleanCheckboxFa\" }",
-     integer(label,column_name,help)                then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, template: \"integer\" }",
-     float(label,column_name,help)                  then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, template: \"number\"  }", 
-     choices_int(label,column_name,selector,help)   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, edittype:\"select\", editoptions:{value: "+to_jqGrid_selector(selector.get(db, empty_referer, ""))+"},"+
+     boolean(label,column_name,help)                then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, template: \"booleanCheckboxFa\" }",
+     integer(label,column_name,help)                then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, template: \"integer\" }",
+     float(label,column_name,help)                  then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, template: \"number\"  }", 
+     choices_int(label,column_name,selector,help)   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, edittype:\"select\", editoptions:{value: "+to_jqGrid_selector(selector.get(db, empty_referer, ""))+"},"+
       "  formatter: \"select\","+
       "  formatoptions:{value: "+to_jqGrid_selector(selector.get(db, empty_referer, ""))+"},"+
       "}", 
-     date(label,column_name,help)                   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, formatter: \"date\", formatoptions: { newformat: \"Y-M-d\" }}", 
-     time(label,column_name,help)                   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true }",
-     datetime(label,column_name,help)               then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true }",
-     color(label, column_name, help)                then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", width: 60, editable:false, formatter:formatColor}",
-     phone(label,column_name,help)                  then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, edittype: 'custom', formatter:formatPhone, unformat:unformatPhone, "+custom_edit_phone+"}",
-     email(label,column_name,help)                  then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, edittype: 'custom', formatter:formatEmail, unformat:unformatEmail, "+custom_edit_email+"}",
+     date(label,column_name,help)                   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, formatter: \"date\", formatoptions: { newformat: \"Y-M-d\" }}", 
+     time(label,column_name,help)                   then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true }",
+     datetime(label,column_name,help)               then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true }",
+     color(label, column_name, help)                then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", width: 60, editable:false, autoResizable: true, formatter:formatColor}",
+     phone(label,column_name,help)                  then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, edittype: 'custom', formatter:formatPhone, unformat:unformatPhone, "+custom_edit_phone+"}",
+     email(label,column_name,help)                  then "{ name: \""+column_name+"\", label: \""+_T(label)+"\", editable:true, autoResizable: true, edittype: 'custom', formatter:formatEmail, unformat:unformatEmail, "+custom_edit_email+"}",
   }
 .
@@ -110,7 +125,7 @@ public define String
   )=
   "colModel: [\n"+
     join(",\n            ", 
-      [ "{name: 'myac', label: 'Action', width:65, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}}" .
+      [ "{name: 'myac', label: '', width:65, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}}" .
         map((VT_view_model_entry col_model) |-> to_jqGrid_ColModel(db, table_referer, col_model, _T), models)
       ]
       )+
@@ -208,7 +208,7 @@ public define HTML_Partial_Content
             ])), //end of sequence in form
     //        )])
     partial(jquery_button(jquery_img_button(icn16_cross, _T("CANCEL"), "", jQuery_actioner(same, jqlink(cancel_action)), left))),    
-    partial(jquery_button(jquery_img_button(icn16_check, _T("IMPORT"), "", jQuery_actioner(same, jqform("import_csv_form")), left)))
+    partial(img_submit_button(_T("IMPORT"), "import_csv_form"))
     ])  //end of sequence
   )
 .
@@ -175,8 +175,16 @@ define String
   "
   editurl: '?aws_controller=hk_c&aws_action=grid_action&table_name="+rows.table_name+"',  
   iconSet: \"fontAwesome\",
+  cmTemplate: { autoResizable: true},
+  autoResizing: { compact: true, resetWidthOrg: true },
+  autoresizeOnLoad: true,  
   autowidth:true,
-  shrinkToFit:false,
+  /*idPrefix: '_g_"+uid+"_',*/
+  /*pager: '#"+uid+"_pager',*/
+  pager: true,
+  toppager: true,
+  
+  /*shrinkToFit:false,*/
   rowNum:30,
   rowList:[5,10,20,30,50],
   cellEdit: false,
@@ -197,7 +205,18 @@ define String
     $self.jqGrid(\"editRow\", rowid, { focusField: e.target });
   },
-  pager: '#"+uid+"_pager',
+  afterAddRow: function () {
+    recreateFilterToolbar.call(this);
+                //updateAutocompleteSource.call(this, \"name\");
+  },
+  afterSetRow: function () {
+    recreateFilterToolbar.call(this);
+                //updateAutocompleteSource.call(this, \"name\");
+  },
+  afterDelRow: function () {
+            	//updateAutocompleteSource.call(this, \"name\");
+    recreateFilterToolbar.call(this);
+  },
   caption:"+to_JSON_String(_T(to_upper(rows.table_name)))+",
   actionsNavOptions: {
     openicon: \"fa-folder-open-o\",
@@ -234,9 +253,29 @@ public define HTML_Partial_Content
   )=
   with filter_clause = if clause = "" then "" else "&clause="+url_quote(clause),
   with referer_arg = "&"+to_Web_arg(table_referer, ""),
-  with js = js_inline(jquery_ready("var lastSel;$(\"#"+uid+"_grid\").jqGrid({\n"+
-  "url:'?aws_controller=hk_c&aws_action=grid_view&table_name="+rows.table_name+"&view_name="+rows.view_name+filter_clause+referer_arg+"',"+
-  "datatype: \"json\","+
+  with js = js_inline(jquery_ready(
+"var lastSel;
+  initAutocomplete = function (elem, cmName) {
+    $(elem).autocomplete({
+      source: $(this).jqGrid(\"getUniqueValueFromColumnIndex\", cmName),
+      delay: 0,
+      minLength: 0
+    });
+  }, 
+  recreateFilterToolbar = function () {
+    $(this)
+      .jqGrid(\"destroyFilterToolbar\")
+      .jqGrid(\"filterToolbar\");
+  },
+  updateAutocompleteSource = function (cmName) {
+    var newUniqueValues = $(this).jqGrid(\"getUniqueValueFromColumnIndex\", cmName);
+    $(\"#gs_\" + this.id + \"_\" + cmName)
+      .autocomplete(\"option\", \"source\", newUniqueValues);
+  };
+$(\"#"+uid+"_grid\").jqGrid({
+url:'?aws_controller=hk_c&aws_action=grid_view&table_name="+rows.table_name+"&view_name="+rows.view_name+filter_clause+referer_arg+"',"+
+  "datatype: \"json\",
+  "+
    to_jqGrid_ColModel(db, table_referer, _T, rows.view_model.list)+","+
 //   rows.json_data_string+
    jqGrid_options(uid, rows, _T)+