jqgrid stype 详细使用说明

时间: 2023-08-05 12:09:04 浏览: 40
jqGrid 是一个基于 jQuery 的表格插件,它可以实现强大的表格功能,包括分页、排序、搜索等。下面是 jqGrid stype 的详细使用说明: 1. 引入必要的文件 在使用 jqGrid stype 之前,需要引入以下文件: ``` <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/free-jqgrid/4.15.5/js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/free-jqgrid/4.15.5/js/jquery.jqgrid.min.js"></script> ``` 2. HTML 结构 在页面中添加一个表格,如下所示: ``` <table id="grid"></table> <div id="pager"></div> ``` 3. JavaScript 代码 初始化 jqGrid,如下所示: ``` $("#grid").jqGrid({ url: "your_url", datatype: "json", mtype: "POST", colNames: ["ID", "名称", "描述"], colModel: [ {name: "id", index: "id", width: 100}, {name: "name", index: "name", width: 200}, {name: "description", index: "description", width: 300} ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "desc", caption: "表格标题" }); ``` 以上代码中,`url` 表示数据源,`colNames` 表示表头,`colModel` 表示列模型,`rowNum` 表示每页显示的行数,`rowList` 表示每页显示行数的下拉框选项,`pager` 表示分页控件的容器,`sortname` 表示默认排序的列,`viewrecords` 表示是否显示总记录数,`sortorder` 表示默认排序的顺序,`caption` 表示表格标题。 4. 其他设置 你可以根据需求设置其他属性,例如: ``` // 隐藏表头 $("#grid").jqGrid("hideCol", "cb"); // 设置表格高度 $("#grid").jqGrid("setGridHeight", 400); // 设置表格宽度 $("#grid").jqGrid("setGridWidth", 800); // 设置表格标题 $("#grid").jqGrid("setCaption", "新标题"); ``` 以上代码中,`hideCol` 表示隐藏列,`setGridHeight` 表示设置表格高度,`setGridWidth` 表示设置表格宽度,`setCaption` 表示设置表格标题。 以上就是 jqGrid stype 的详细使用说明,希望对你有所帮助!

相关推荐

在 jqGrid 中,colModel 是用于定义表格列模型的属性之一,而 stype 属性则是 colModel 的一个子属性,用于定义表格列的编辑类型。常用的 stype 类型有以下几种: 1. text 表示文本框,用于输入文本信息。 {name: "name", index: "name", width: 200, editable: true, edittype: "text", stype: "text"} 2. select 表示下拉框,用于选择固定的选项。 {name: "gender", index: "gender", width: 100, editable: true, edittype: "select", stype: "select", editoptions: {value: ":请选择;1:男;2:女"}} 3. date 表示日期选择器,用于选择日期。 {name: "birthday", index: "birthday", width: 100, editable: true, edittype: "text", stype: "date", searchoptions: {dataInit: function (el) { $(el).datepicker({dateFormat: "yy-mm-dd"}); }}} 4. checkbox 表示复选框,用于选择一个或多个选项。 {name: "hobby", index: "hobby", width: 200, editable: true, edittype: "checkbox", stype: "select", editoptions: {value: "篮球:篮球;足球:足球;乒乓球:乒乓球"}} 5. textarea 表示多行文本框,用于输入多行文本信息。 {name: "description", index: "description", width: 300, editable: true, edittype: "textarea", stype: "text"} 6. custom 表示自定义类型,可以根据需求自定义编辑类型。 {name: "price", index: "price", width: 100, editable: true, edittype: "text", stype: "custom", searchoptions: {sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: function (el) { $(el).spinner({min: 0, max: 1000}); }}} 以上就是 jqGrid 中常用的 colModel.stype 类型,你可以根据需求选择不同的编辑类型来实现表格的功能。
在 jqGrid 5.2.1 中,stype="select" 的列默认是不支持搜索框的。不过,你可以使用 searchoptions 属性来设置搜索框的选项,包括设置搜索框的宽度、高度、提示信息等。 以下是一个示例代码: javascript {name:'category', index:'category', width:150, stype:'select', searchoptions:{sopt:['eq','ne'], dataUrl:'/get_categories.php', buildSelect:function(data){return '<select><option value=""></option>'+data+'</select>'}}, editable:true, edittype:'select', editoptions:{value:{'1':'Category 1','2':'Category 2','3':'Category 3'}}}, 在上面的示例中,category 列的 stype 被设置为 'select',并且设置了 searchoptions 属性,其中的 dataUrl 表示从服务器端获取 select 元素的选项,buildSelect 表示自定义 select 元素的构造函数。 如果你想自定义搜索框的样式,可以使用 colModel 中的 classes 属性。例如: javascript {name:'category', index:'category', width:150, stype:'select', searchoptions:{sopt:['eq','ne'], dataUrl:'/get_categories.php', buildSelect:function(data){return '<select><option value=""></option>'+data+'</select>'}}, classes: 'my-search-class', editable:true, edittype:'select', editoptions:{value:{'1':'Category 1','2':'Category 2','3':'Category 3'}}}, 在上面的示例中,我们为 category 列的搜索框设置了一个名为 my-search-class 的自定义样式。 总之,虽然 jqGrid 5.2.1 中 stype="select" 的列默认不支持搜索框,但你可以使用 searchoptions 和 classes 属性来自定义搜索框和样式。
下面是一个使用 jqGrid 动态设置筛选列下拉框的值的示例代码: javascript // 定义一个全局变量用于保存下拉框的值 var selectOptions = {}; // 定义一个函数用于获取下拉框的值 function getSelectOptions(colName) { // 判断是否已经获取过该列的下拉框值 if (selectOptions[colName]) { // 如果已经获取过,直接返回保存的值 return selectOptions[colName]; } else { // 如果没有获取过,发送请求获取下拉框的值 $.ajax({ url: 'getSelectOptions.php', type: 'GET', data: { colName: colName }, success: function(data) { // 将获取到的值保存到全局变量中 selectOptions[colName] = data; } }); } } // 初始化 jqGrid $('#grid').jqGrid({ url: 'getData.php', datatype: 'json', colNames: ['ID', 'Name', 'Gender'], colModel: [ { name: 'id', index: 'id', width: 50 }, { name: 'name', index: 'name', width: 100 }, { name: 'gender', index: 'gender', width: 100, stype: 'select', searchoptions: { value: ':All;' } } ], rowNum: 10, rowList: [10, 20, 30], pager: '#pager', sortname: 'id', viewrecords: true, sortorder: 'asc', caption: 'My Grid', // 在 jqGrid 初始化完成后动态设置下拉框的值 loadComplete: function() { // 获取列的名称 var colName = $('#grid').jqGrid('getGridParam', 'colModel')[2].name; // 获取下拉框的值 var selectValues = getSelectOptions(colName); // 将下拉框的值设置到筛选列中 $('#grid').jqGrid('setColProp', colName, { searchoptions: { value: selectValues } }); } }); 上面的示例中,我们定义了一个全局变量 selectOptions 用于保存下拉框的值,然后定义了一个函数 getSelectOptions 用于获取下拉框的值。在 jqGrid 初始化完成后,我们调用 getSelectOptions 函数获取下拉框的值,并将其设置到筛选列中。在筛选列中,我们使用 stype: 'select' 来指定使用下拉框作为筛选方式,然后使用 searchoptions 属性设置下拉框的值。
好的,以下是基于 jqGrid 4.15.5 版本的动态设置筛选列下拉框值的示例代码及注释: javascript // 定义 jqGrid 表格 $("#grid").jqGrid({ url: "data.json", // 数据源 URL datatype: "json", // 数据类型 colModel: [ {name: "id", label: "ID", width: 50}, {name: "name", label: "姓名", width: 100}, {name: "gender", label: "性别", width: 80, stype: "select", searchoptions: {value: ":All;男:男;女:女"}}, // "stype" 表示该列的筛选类型,"searchoptions" 表示该列的筛选选项 {name: "age", label: "年龄", width: 80, stype: "integer", searchoptions: {sopt: ["eq", "ne", "lt", "le", "gt", "ge"]}}, // "sopt" 表示该列的筛选操作符 {name: "email", label: "邮箱", width: 150}, {name: "address", label: "地址", width: 300} ], rowNum: 10, // 每页行数 rowList: [10, 20, 30], // 每页行数选项 pager: "#pager", // 分页控件 ID sortname: "id", // 默认排序列名 sortorder: "asc", // 默认排序方式 viewrecords: true, // 是否显示总记录数 caption: "示例表格" // 表格标题 }); // 动态设置 "gender" 列的筛选选项 $("#grid").setColProp("gender", { searchoptions: { dataUrl: "gender.json", // 筛选选项数据源 URL buildSelect: function (data) { // 重写 "buildSelect" 方法,解析数据并返回下拉框 HTML var html = '<select>'; html += '<option value="">All</option>'; // 添加一个 "All" 选项 $.each(data, function (i, item) { html += '<option value="' + item.id + '">' + item.name + '</option>'; }); html += '</select>'; return html; } } }); 注释中已经说明了每一部分的作用,简单总结一下: 1. 定义 jqGrid 表格,其中 "gender" 列的 "stype" 设置为 "select",表示该列的筛选类型为下拉框,"searchoptions" 设置了该列的筛选选项,包括下拉框的选项值。 2. 动态设置 "gender" 列的筛选选项,其中 "dataUrl" 表示筛选选项的数据源,"buildSelect" 方法用于解析数据并生成下拉框 HTML。 希望这个示例能够帮到你,如果还有不清楚的地方,可以继续提问哦!
要实现 jqgrid 表头的筛选下拉框,可以按照以下步骤操作: 1. 在 colModel 中设置 stype 为 select,如下: { name: 'xxx', index: 'xxx', stype: 'select', searchoptions: { value: ':All;1:Option1;2:Option2;3:Option3' } } 其中,value 属性中的字符串是下拉框的选项,格式为 label:value,多个选项之间用分号隔开,第一个选项必须为 All(或者 Any),表示所有选项。 2. 在 jqGrid 的 options 中添加如下代码: { // ... postData: { filters: function () { var columnData = $("#grid").jqGrid('getGridParam', 'postData').columns; var postData = JSON.stringify({ groupOp: "AND", rules: [{ field: columnData[0].name, op: "eq", data: columnData[0].searchValue }, { field: columnData[1].name, op: "eq", data: columnData[1].searchValue }] }); return postData; } }, // ... } 其中,postData 中的 filters 属性用于设置筛选条件,rules 数组中的每个元素表示一个筛选条件,包含三个属性:field(列名)、op(操作符)、data(筛选值)。这里的 columnData 是获取当前 jqGrid 的 postData 中的 columns 属性。 3. 在 jqGrid 的 options 中设置 search 属性为 true: { // ... search: true, // ... } 4. 在 jqGrid 中添加一个按钮,用于触发表头筛选: $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false }) .jqGrid('navButtonAdd', '#pager', { caption: "Search", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-search', onClickButton: function () { $("#grid")[0].toggleToolbar(); } }); 这样就可以实现 jqgrid 表头的筛选下拉框了。
要封装 jqGrid 表头条件搜索,你可以按照以下步骤进行: 1. 在 HTML 页面中添加一个表格,并为其指定一个唯一的 ID。 2. 在 JavaScript 中使用 jqGrid 插件对该表格进行初始化,并设置表头条件搜索的相关参数,例如: $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", index: "id", width: 55 }, { name: "name", index: "name", width: 90 }, { name: "category", index: "category", width: 80, stype: "select", searchoptions: { value: ":All;1:Category 1;2:Category 2" } }, { name: "price", index: "price", width: 80, align: "right", formatter: "currency", formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ " }, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } }, ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "desc", caption: "jqGrid Example", height: "auto", autowidth: true, search: true, searchOnEnter: false, searchOperators: true, searchToolbar: true, }); 在上面的代码中,colModel 数组中的每个元素表示表格中的一列,其中 stype 属性用于指定该列的搜索类型,例如 select 表示下拉列表框,text 表示文本框,date 表示日期选择框等。searchoptions 属性用于设置该列的搜索选项,例如 value 属性可以设置下拉列表框中的选项,sopt 属性可以设置该列支持的搜索操作符。 3. 在 HTML 页面中添加一个搜索框,并为其指定一个唯一的 ID。 4. 在 JavaScript 中使用 jqGrid 插件的 filterToolbar 方法对搜索框进行初始化,并指定要搜索的表格的 ID,例如: $("#grid").jqGrid("filterToolbar", { searchOnEnter: false, searchOperators: true }); 在上面的代码中,searchOnEnter 属性表示是否在按下回车键时触发搜索操作,searchOperators 属性表示是否显示搜索操作符列表。 通过以上步骤,你就可以封装 jqGrid 表头条件搜索了。
好的,以下是基于 jqGrid 4.15.5 版本的动态设置筛选列集合数据的示例代码及注释: javascript // 定义 jqGrid 表格 $("#grid").jqGrid({ url: "data.json", // 数据源 URL datatype: "json", // 数据类型 colModel: [ {name: "id", label: "ID", width: 50}, {name: "name", label: "姓名", width: 100}, {name: "gender", label: "性别", width: 80, stype: "select", searchoptions: {value: ":All;男:男;女:女"}}, // "stype" 表示该列的筛选类型,"searchoptions" 表示该列的筛选选项 {name: "hobby", label: "爱好", width: 150, stype: "select", searchoptions: {value: ":All"}}, // "stype" 表示该列的筛选类型,"searchoptions" 表示该列的筛选选项 {name: "age", label: "年龄", width: 80, stype: "integer", searchoptions: {sopt: ["eq", "ne", "lt", "le", "gt", "ge"]}}, // "sopt" 表示该列的筛选操作符 {name: "email", label: "邮箱", width: 150}, {name: "address", label: "地址", width: 300} ], rowNum: 10, // 每页行数 rowList: [10, 20, 30], // 每页行数选项 pager: "#pager", // 分页控件 ID sortname: "id", // 默认排序列名 sortorder: "asc", // 默认排序方式 viewrecords: true, // 是否显示总记录数 caption: "示例表格" // 表格标题 }); // 动态设置 "hobby" 列的筛选选项 $.ajax({ url: "hobby.json", // 筛选选项数据源 URL dataType: "json", success: function (data) { var options = {}; $.each(data, function (i, item) { options[item.id] = item.name; }); $("#grid").setColProp("hobby", { searchoptions: { value: ":All;" + options // 将集合数据转换为字符串形式 } }); } }); 注释中已经说明了每一部分的作用,简单总结一下: 1. 定义 jqGrid 表格,其中 "hobby" 列的 "stype" 设置为 "select",表示该列的筛选类型为下拉框,"searchoptions" 设置了该列的筛选选项,下拉框的选项值暂时设置为 ":All",待后续动态设置。 2. 通过 Ajax 请求获取筛选选项数据源,并将集合数据转换为字符串形式(格式为 "value1:text1;value2:text2;..."),然后动态设置 "hobby" 列的筛选选项。 希望这个示例能够帮到你,如果还有不清楚的地方,可以继续提问哦!
要在 C# 后台封装 jqGrid 表头条件搜索,你可以按照以下步骤进行: 1. 在后台定义一个方法,该方法接收 jqGrid 发送过来的搜索条件,并返回符合条件的数据列表,例如: public List<MyModel> GetMyData(string sidx, string sord, int page, int rows, string filters) { // 解析搜索条件 JObject search = JObject.Parse(filters); JArray rules = (JArray)search["rules"]; // 构造查询条件 string where = ""; foreach (JObject rule in rules) { string field = (string)rule["field"]; string op = (string)rule["op"]; string data = (string)rule["data"]; switch (op) { case "eq": where += $" AND {field} = '{data}'"; break; case "ne": where += $" AND {field} <> '{data}'"; break; case "lt": where += $" AND {field} < '{data}'"; break; case "le": where += $" AND {field} <= '{data}'"; break; case "gt": where += $" AND {field} > '{data}'"; break; case "ge": where += $" AND {field} >= '{data}'"; break; case "cn": where += $" AND {field} LIKE '%{data}%'"; break; } } // 查询数据并返回 List<MyModel> data = db.MyTable.Where($"1 = 1 {where}") .OrderBy($"{sidx} {sord}") .Skip((page - 1) * rows) .Take(rows) .ToList(); return data; } 在上面的代码中,sidx 和 sord 参数表示排序字段和排序方式,page 和 rows 参数表示当前页码和每页显示的记录数,filters 参数表示搜索条件。该方法首先解析搜索条件,然后根据搜索条件构造查询条件,并使用 LINQ 查询数据并返回。 2. 在前端调用后台方法,并将搜索条件传递给后台,例如: $("#grid").jqGrid({ url: "MyController/GetMyData", postData: { sidx: "id", sord: "desc", page: 1, rows: 10, filters: "" }, datatype: "json", colModel: [ { name: "id", index: "id", width: 55 }, { name: "name", index: "name", width: 90 }, { name: "category", index: "category", width: 80, stype: "select", searchoptions: { value: ":All;1:Category 1;2:Category 2" } }, { name: "price", index: "price", width: 80, align: "right", formatter: "currency", formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ " }, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } }, ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "desc", caption: "jqGrid Example", height: "auto", autowidth: true, search: true, searchOnEnter: false, searchOperators: true, searchToolbar: true, onSearch: function () { var postData = $("#grid").getGridParam("postData"); postData.filters = JSON.stringify($("#grid")[0].p.postData.filters); $("#grid").setGridParam({ postData: postData }).trigger("reloadGrid"); }, }); 在上面的代码中,url 属性指定后台方法的 URL,postData 属性指定传递给后台的参数,onSearch 事件在用户点击搜索按钮时触发,该事件将搜索条件转换为 JSON 字符串,并将其作为 filters 参数传递给后台方法。 通过以上步骤,你就可以在 C# 后台封装 jqGrid 表头条件搜索了。

最新推荐

抖音上的给朋友发送天气的小程序.zip

如题,抖音小程序源码,易于运行部署,用于学习交流

300596利安隆财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2013-2022).xlsx

包含1391个指标,其说明文档参考: https://blog.csdn.net/yushibing717/article/details/136115027 数据来源:基于上市公司公告数据整理 数据期间:从具体上市公司上市那一年开始-2022年度的数据,年度数据 包含各上市公司股票的、多年度的上市公司财务报表资产负债表、上市公司财务报表利润表、上市公司财务报表现金流量表间接法、直接法四表合在一个面板里面,方便比较和分析利用 含各个上市公司股票的、多年度的 偿债能力 披露财务指标 比率结构 经营能力 盈利能力 现金流量分析 风险水平 发展能力 每股指标 相对价值指标 股利分配 11类财务指标分析数据合在一个面板里面,方便比较和分析利用 含上市公司公告的公司治理、股权结构、审计、诉讼等数据 包含1391个指标,如: 股票简称 证券ID 注册具体地址 公司办公地址 办公地址邮政编码 董事会秘书 董秘联系电话 董秘传真 董秘电子邮箱 ..... 货币资金 其中:客户资金存款 结算备付金 其中:客户备付金 .........

300649杭州园林财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022).xlsx

300649杭州园林财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022)

陕西高技术统计面板2021-2000生产经营产业发展RD经费支出新产品研发等682个指标.xlsx

本数据包含的682个统计指标详见: https://blog.csdn.net/yushibing717/article/details/136286889 如: 高技术产业_生产经营情况-高技术产业主要经济指标-企业数_个 高技术产业_生产经营情况-高技术产业主要经济指标-从业人员年平均人数_人 高技术产业_生产经营情况-高技术产业主要经济指标-当年价总产值_亿元 高技术产业_生产经营情况-高技术产业主要经济指标-资产总计_亿元 高技术产业_生产经营情况-高技术产业主要经济指标-主营业务收入_亿元 高技术产业_生产经营情况-高技术产业主要经济指标-利润总额_亿元 高技术产业_生产经营情况-高技术产业主要经济指标-利税_亿元 高技术产业_生产经营情况-高技术产业主要经济指标-出口交货值_亿元 高技术产业_生产经营情况-大中型企业高技术产业_生产经营情况-企业数_个 高技术产业_生产经营情况-大中型企业高技术产业_生产经营情况-从业人员年平均人数_人 ......

300668杰恩设计财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022).xlsx

300668杰恩设计财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022)

ssm数据结构课程网络学习平台的+vue毕业论文.doc

ssm数据结构课程网络学习平台的+vue毕业论文.doc

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

Objective-C中的协议与代理设计模式介绍

# 1. 理解Objective-C中的协议 协议是Objective-C中一种很重要的特性,它类似于其他编程语言中的接口,用来定义对象之间的通信规则和行为约定。在Objective-C中,协议可以帮助实现对象之间的松耦合和重用性。让我们深入了解Objective-C中的协议。 ## 1.1 什么是Objective-C中的协议? 在Objective-C中,协议是一组方法的声明,定义了一个对象可以遵循的接口。协议本身并不实现任何方法,而是规定遵循该协议的类需要实现协议中定义的方法。通过协议,可以在不同的类之间定义一组公共的行为和方法。 ## 1.2 协议的声明和使用方法 在Ob

编写求n!的函数f(int n),在主函数中输入两个整数m、n,然后调用函数求: C=m!/n!(m -n)!

好的,我可以编写这个函数。以下是代码示例: ```c++ #include <iostream> using namespace std; int f(int n) { if (n <= 1) { return 1; } else { return n * f(n - 1); } } int main() { int m, n; cout << "请输入两个整数m和n,以空格分隔:" << endl; cin >> m >> n; int C = f(m) / (f(n) * f(m - n));

视频中运动目标跟踪算法的研究.doc

视频中运动目标跟踪算法的研究.doc